CSS

层叠样式表 (Cascading Style Sheet)

1.字体设置：

有继承性，给父元素设置，子元素可继承。(1)字体倾斜：font-style:normal/italic(2)字体加粗：font-weight:normal/bold/bolder/100/200(3)字体大小：font-size:12px(4)字体类型：font-family(5)字体颜色：color (对于a标签，需选中a标签)(6)复合属性：font:font-style font-weight font-size font-family (font-style font-weight可以不写)    

2.文本设置：

(1)文本修饰线：text-decoration：none(无)/underline(下划线)/line-through(删除线)(2)首行空格：text-indent:2em(两格)/-999999em(隐藏一个盒子中的文本)(3)文本对齐方式：text-align:left/center/right(4)设置行高：line-height:30px(行高30px)

3.CSS层叠性

对于同一个盒子，如果设置了多个样式，哪一个起作用？(1)自己有样式>继承2017高考时间>默认(2)行内样式>内部样式=外部样式(就近原则)(3)ID>CLASS>标签(DIV)(4)特殊值：谁多听谁

4.盒子模型（六大属性）

(1)width  宽度(2)height  高度(3)border  盒子边框    border是复合属性，没有顺序。        例 border:1px solid red;            border-width边框粗细            border-style边框样式            border-color边框颜色    四个方向：        border-top        border-bottom        border-left        border-roffice办公软件学习ight(4)padding  内边距(补白，内容与边框间的间隙)    四个方向：        padding-top:         padding-right:        padding-bottom:        padding-left:    padding后面也可以跟一个值，二个值，三个值，四个值：        一个值：padding:10px  四个方向的padding都是10px        二个值：padding:10px 20px;   上下是10px  左右是20px        三个值：padding:10px 20px 30px;   上是10px  左右是20px  下是30px        四个值：padding:10px 20px 30px 40px;   上 右 下 左            （1）有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }    （2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。    （3）对于块级元素来说，上下padding可以撑起男盒子的高度。(5)margin  外边距(边框以外的间隙)    四有个方向：        margin-top         margin-right         margin-bottom         margin-left      margin后面也可以跟一个值，二个值，三个值，四个值：        一个值：margin:10px  四个方向的margin都是10px        二个值：margin:10px 20px;   上下是10px  左右是20px        三个值：margin:10px 20px 30px;   上是10px  左右是20px  下是30px        四个值：margin:10px 20px 30px 40px;   上 右 下 左    （1）有此标签有默认的margin  一刀切  *{ margin:0; padding:0; }    （2）对于行内元素来说，margin在垂直方向上是无效的     （3）margin可以设置auto。 表示尽可以大  div{ margin:0 auto; }    （4）margin可以设置负值      （5）对于块级元素来说，margin有重叠问题（塌陷问题）        1）兄弟元素之间的重叠问题            margin塌陷的前提：男标签、垂直方向                margin到底是多少：取大原则        2）父子元素之间的重叠问题            解决办法：给父元素加padding ，只加一个0px不行或者给父元素加border(6)background  盒子背景    background-color:设置盒子的背景颜色  背景颜色可以填充padding  也可以填充border    background-image:设置盒子的背景图片  img标签也是盒子  也可以给img这个盒子设置蛙泳世界纪录背景图片        一个盒子大小正好和背景图大小一样：正好装进去         一个盒子如果大于背景图：默认会在x和y轴都进行平铺         一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐  左上角是指从pddding开始  但是border中也会填充图片图片    background-repeat: 控制是否平铺        repeat-x  只平铺x轴        repeat-y  只平铺y轴      烧带鱼  repeat x和y轴都平铺        no-repeat x和y轴都不平铺心理测量学    background-position:        一个小盒子中放一个大的背景图，可以使用background-position定位。        一个大盒子中放一个小的背景图，也可以使用background-position定位。    background-attachment: 背景随盒子滚动而滚动。

5.布局

(1)流动布局    最简单、最原始、功能较弱。        男盒子：独占一行，从最上边开始；        女盒子：并排显示，一行装不下，自动换行。(2)浮动布局    a.目的：使用浮动让块级元素并排显示。    b.浮动元素的特点：        1）贴靠性：如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。        2）包裹性：如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小。        3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，即父元素的高度塌陷。        4）如果一个女盒子浮动了，就可以设置宽度和高度，即女盒子就变成男盒子。        5）浮动元素都是先向上浮动,浮动了父盒子的边界。body是一个盒子，如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷。    c.清除浮动所造成的的影响：        1）清除对父元素所造成影响            A）overflow:hidden              B）加高法：对父元素加高度        2）清除对兄弟元素所造成影响：            clear: left/right/both（clear:both只能写在第1个受影响的元素上，写在父元素上没有用）    d.两个浮动的元素的不能重叠到一起,如何可以让两个盒子重叠到一起：        1）一个盒子浮动，另一个不浮动        2）定位，定位完全脱离标准文档流

本文地址：https://blog.csdn.net/weixin_45984237/article/details/107258840