网站制作架构,wordpress最新中文版,网页版原神,python 安装wordpressCSS系列--持续更新中 1.CSS预处理器有哪些类型#xff0c;有什么区别2.盒模型是什么#xff0c;有哪两种类型3.css选择器有哪些#xff0c;优先级是怎样的#xff0c;哪些属性可以继承4. 说说em/px/rem/vh/vw的区别5.元素实现水平垂直居中的方法有哪些#xff0c;如果元素… CSS系列--持续更新中 1.CSS预处理器有哪些类型有什么区别2.盒模型是什么有哪两种类型3.css选择器有哪些优先级是怎样的哪些属性可以继承4. 说说em/px/rem/vh/vw的区别5.元素实现水平垂直居中的方法有哪些如果元素不定宽高呢6.说说flex,以及适用的场景 1.CSS预处理器有哪些类型有什么区别
CSS是一门标记性语言不利于复用很难写出易于阅读且易于维护的代码。 于是就出现了CSS预处理器增加了变量函数混入等功能让CSS更易于维护。 类型
sass最早且最成熟的CSS预处理器后缀名为.sass,scss.严格按照缩进形式省去大括号和分号。less基于sass,书写格式更像css,易上手易兼容但编程功能不够。stylus基于node.js社区主要用于node项目进行预处理stylus是新型语言后缀名为.styl。
区别
变量less使用开头中间使用隔开sass使用$开头中间使用隔开stylus开头前两种都可但中间必须使用“”隔开。
//less
red: #c00;strong {color: red;
}//sass
$red: #c00
strong{color: $red
}//stylus
red #c00
strongcolor: red作用域sass在全局作用域最好不要重名less和stylus会先找局部作用域没有的话会一层一层网上找。嵌套三者都一致引用父级选择器使用但sass和stylus不使用大括号混入将一部分样式抽出作为一个单独定义模块可以供多个选择器复用sass申明需要mixinstylus可以不要符号但默认要“”。模块化将代码分成一个个模块。
2.盒模型是什么有哪两种类型
盒模型在对一个文档进行布局时浏览器引擎会根据css的基础盒模型标准将每一个元素变为一个矩形盒子盒子由四部分组成contentpaddingbordermargin。
标准盒模型width height代表的是contentIE盒模型 width height代表的是content padding border
可以通过box-sizing来改变盒模型content-box为标准盒模型border-box为IE盒模型
3.css选择器有哪些优先级是怎样的哪些属性可以继承
CSS选择器 id选择器 #myid)类选择器 (.class)标签选择器(div,p)后代选择器(h1 p)子选择器(ul li)兄弟选择器(li~a)相邻兄弟选择器(lia)属性选择器(a[rel “external”])伪类选择器(a:hover)伪元素选择器(::before, ::after)通配符选择器(*) 优先级 内联 ID选择器 类选择器 标签选择器 1内联样式选择器x,0,0,0行内样式 2ID选择器0,x,0,0 3class选择器/属性选择器/伪类选择器 0,0,x,0 4元素和伪元素选择器0,0,0,x 继承属性 在css中继承是指的是给父元素设置一些属性后代元素会自动拥有这些属性
关于继承属性可以分成
字体系列属性 font:组合字体 font-family:规定元素的字体系列 font-weight:设置字体的粗细 font-size:设置字体的尺寸 font-style:定义字体的风格 font-variant:偏大或偏小的字体 文本系列属性 text-indent文本缩进 text-align文本水平对齐 line-height行高 word-spacing增加或减少单词间的空白 letter-spacing增加或减少字符间的空白 text-transform控制文本大小写 direction规定文本的书写方向 color文本颜色 元素可见性 visibility 表格布局属性 caption-side定位表格标题位置 border-collapse合并表格边框 border-spacing设置相邻单元格的边框间的距离 empty-cells单元格的边框的出现与消失 table-layout表格的宽度由什么决定 列表属性 list-style-type文字前面的小点点样式 list-style-position小点点位置 list-style以上的属性可通过这属性集合 引用 quotes设置嵌套引用的引号类型 光标属性 cursor箭头可以变成需要的形状 继承中比较特殊的几点
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性 display
文本属性vertical-align、text-decoration
盒子模型的属性宽度、高度、内外边距、边框等
背景属性背景图片、颜色、位置等
定位属性浮动、清除浮动、定位position等
生成内容属性content、counter-reset、counter-increment
轮廓样式属性outline-style、outline-width、outline-color、outline
页面样式属性size、page-break-before、page-break-after
4. 说说em/px/rem/vh/vw的区别
px:像素即显示在页面上的一个小点每个像素都是大小相同的, px大小与其他元素无关。绝对长度单位页面按照精确像素进行展示。em:相对长度单位。相当于当前对象的文本字体尺寸默认字体尺寸1em 16px,em值不固定em会继承父节点的字体大小使用级联方式计算尺寸。rem:相对长度单位相对的是html根元素font-size的值。rem集相对大小与绝对大小优点于一身。vh,vw:vh表示窗口高度vw表示窗口宽度主要用于页面视图布局
5.元素实现水平垂直居中的方法有哪些如果元素不定宽高呢
使用绝对定位absolute让left、right、top、bottom都为0然后让marginauto即可实现水平垂直居中。子绝父相水平居中left:50%,margin-left:(盒子宽度一半垂直居中top:50%,margin-top:(盒子高度一半‘flex布局给父盒子一个弹性布局并在父容器中写入justify-content:center,盒align-items:center表示水平居中盒垂直居中即可。
6.说说flex,以及适用的场景
flexible为弹性布局容器默认有两条轴主轴与交叉轴通过flex-direction来决定主轴方向。每根轴都有起点和终点。 使用场景用于实现水平方向上的元素水平垂直居中可使用于二栏、三栏自适应布局中。
