馆陶做网站/seo网站优化培

1 盒子模型

1.1 基本

1. 边框
   宽度——border-width
   颜色——border-color
   样式——border-style
   合写——border:width color style
   表格合并边框——border-collapse:collapse
2. 内边距
   ①单独样式

 div{padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;}

②复合样式

div{padding:50px;/*上下左右*/padding:50px 50px;/*上下 左右*/padding:50px 50px 50px;/*上 左右 下*/padding:50px 50px 50px 50px;/*上 右 下	左*/}

3. 外边距
   ①单独样式

 div{margin-top:10px;margin-bottom:10px;margin-right:10px;margin-left:10px;}

②复合样式

div{margin:50px;/*上下左右*/margin:50px 50px;/*上下 左右*/margin:50px 50px 50px;/*上 左右 下*/margin:50px 50px 50px 50px;/*上 右 下	左*/}

1.2 盒子阴影

box-shadow:水平位置，垂直位置 ，模糊距离，阴影尺寸，阴影颜色，内/外阴影

1.3 注意点

1. 外边距合并
   垂直方向：后外边距取两者之大
   嵌套合并：加边框和内边距解决
2. 父子盒子嵌套
   要求他们之间有距离，使用margin-top不起作用。
   解决办法①给父盒子加边框②给父盒子加padding
3. 居中
   ①文本水平居中：text-align:center;
   ②盒子水平居中：margin:0 auto;
4. 稳定性
   width>padding>margin

2 特性

1. 层叠性
   同一个元素被不同选择器选中，设置相同的样式，权重大的会层叠掉权重小的选择器。
2. 继承性
   只能继承文字属性，不能继承盒子属性。
3. 优先级
   权重问题：行内>id>class>标签
   !important:提高选择器权重

3 显示与隐藏

1. display:block——显示
   display:none——隐藏
2. visibility:hidden——隐藏
3. overflow:hidden——溢出隐藏
   overflow:auto——超出加滚动条，未超出不显示
   overflow:scroll——一直显示滚动条

4 溢出文字隐藏

1. 鼠标样式
   cursor:default——默认小白
   cursor:pointer——小手
   cursor:move——移动
   cursor:text——文本
   2.文字隐藏
   word-break:normal/break-all(单词拆开显示)/keep-all——自动换行
   white-space:nromal/nowrap(强制一行显示)——强制一行显示
   text-overflow:clip(裁剪)/ellipsis(省略号)——文字溢出
   ①单行文本溢出隐藏
   显示省略号：
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   ②多行文本溢出隐藏
   webkit-line-clamp:2;(限定文本内显示行数)
   display:-webkit-box;(弹性盒子)
   -webkit-box-orient:vertical;(元素排列方式)
   text-overflow:ellipsis;
   overflow:hidden;