字体相关样式连写-顺序要求:style weight size family(特殊记忆swsf稍微舒服)
实例:font: italic bold 30px 楷体,宋体,隶书,sans-serif;
省略要求:只能省略前两个,如果省略了相当于设置了默认值;
注意:如果需要同时设置单独和连写形式(要么单独在连写样式下;要么单独样式写进连写里面)
text-align:center能让文本、span标签、a标签、input标签、img标签这些元素水平居中;
注意:以上元素水平居中,text-align:center需要给以上元素的父元素设置;
line-height可以垂直居中-----单行文本
颜色表示法:①color:rgb(0-255,0-255,0-255)
②color:rgba(0-255,0-255,0-255,0-1(透明度))
③关键词
④十六进制表示法
背景图片平铺属性background-repeat:repeat(默认,都平铺),no-repeat(不平铺),repeat-x(水平平铺),repeat-y(垂直平铺)
背景图片位置属性 background-position:水平方向位置 垂直方向位置
属性值:①方位名词 水平方向(left,center,right) 垂直方向(top,center,bottom)
②数字+px(左边) x轴(水平向右) y轴(垂直向下)
背景相关属性的连写形式:background:color image repeat position
实例:background: skyblue url(./T1r_x_BgLT1RXrhCrK.jpg) no-repeat center center;
块级元素 属性:display:block
特点:独占一行;宽度默认是父元素的宽度,高度默认由内容撑开;可以设置宽高;
代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....
行内元素 属性:display:inline
特点:一行可以显示多个;宽度和高度默认由内容撑开;不可以设置宽高;
代表标签:a、span、strong、ins、em、del.....
行内块元素 属性:display:inline-block
特点:一行可以显示多个;可以设置宽高;
代表标签:input、textarea、button、select(特殊情况:img标签有行内块元素特点,但调试工具显示是inline)
CSS的三大特性 ---- 继承性、层叠性、优先级
继承性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性:1. color 2. font-style、font-weight、font-size、font-family
3.text-indent、text-align 4.line-height
注意:可以通过调试工具判断样式是否可以继承;
继承失效的特殊情况:如果元素有浏览器默认样式,此时继承性依然存在,但会优先显示浏览器默认样式;
- a标签的color会继承失效;
- h系列标签的font-size会继承失效;
- div的高度不能继承,但是宽度有类似于继承的效果(实际是div的特性导致(div是块级元素))
层叠性(特性)1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果;
优先级(特性):不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式;
优先级公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:1.!important写在属性值的后面,分号的前面;
2.!important不能提升继承的优先级,只要是继承优先级最低;
3.实际开发中不建议使用!important;
权重叠加计算(场景):如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效;
比较规则:1.先比较第一级数字,如果比较出来了,之后的统统不看;
2.如果第一级数字相同,此时再去比较第二级数字,之后的统统不看;
3.如果最终所有的数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算);
注意:!important如果不是继承,则权重最高,天下第一!
盒子模型(实际大小)=左边框+左padding值+内容宽度+右边框+右padding值
注意:width和height是内容的宽高;设置border会撑大盒子;设置padding也会撑大盒子;
解决办法:①手动内减----需要自己计算多余大小,手动在内容中减去;
②自动内减----给盒子设置属性box-sizing:border-box即可;(浏览器自动计算减去)
外边距(margin)折叠现象--①合并现象:垂直布局的块级元素,上下的margin会合并;
结果:最终两者的距离为margin的最大值
解决办法:避免就好(只给其中一个盒子设置margin即可)
②塌陷现象:互相嵌套的块级元素,子元素的margin-top会作用在父元素上;
结果:导致父元素一起往下移动;
解决办法:1.给父元素设置border-top或者padding-top(分隔父元素的margin-top)
2.给父元素设置overflow:hidden
3.转换成行内块元素
4.设置浮动
行内元素的margin和padding的无效情况(给行内元素设置margin和padding时)
结果:1.水平方向的margin和padding布局中有效;
2.垂直方向的margin和padding布局中无效;
结构伪类选择器(常用于查找某父级选择器中的元素)
E:first-child { } 匹配父元素中第一个子元素,并且是E元素;
E:last-child { } 匹配父元素中最后一个子元素,并且是E元素;
E:nth-child(n) { } 匹配父元素中第n个子元素,并且是E元素;
E:nth-last-child(n) { } 匹配父元素中倒数第n个子元素,并且是E元素;
(拓展补充) nth-of-type
E:nth-of-type(n) { } 只在父元素的同类型(E)子元素范围中,匹配第n个;
区别:1. :nth-child ------ 直接在所有孩子中数个数;
- :nth-of-type ----- 先通过该类型找到符合的一堆子元素,然后在这一堆子元素中数个数;
伪元素(一般页面中的非主体内容可以使用伪元素)
区别: 1. 元素:HTML设置的标签;2. 伪元素:由CSS模拟出的标签效果;
种类: ::before 在父元素内容的最前面添加一个伪元素;
::after 在父元素内容的最后面添加一个伪元素;
注意点: 1. 必须设置content属性才能生效;2. 伪元素默认是行内元素;