CSS学习笔记2_css border 高度-CSDN博客

border可设置元素边框宽度（粗细px），样式，颜色
border：border-width | | border-style | | border-color；
样式 solid实线边框 dashed虚线边框 dotted点线边框 hidden隐藏边框
简写方式：border：1px solid red；没有先后顺序
只修改上边框border-top：1px solid pink；
bottom下边框

3.表格的细线边框border-collapse

border-collapse控制浏览器绘制表格边框的方式，控制相邻单元格的边框
border-collapse：collapse；
相邻边框合并在一起

4.边框会影响盒子实际大小

边框会额外增加盒子大小
盒子已经有了宽度和高度，再指定内边框会撑大盒子
不指定宽度/高度，盒子不会撑开

5.内边距padding

内容和边框的距离padding-left/right/top/bottom
简写：
padding：5px；（上下左右都是5px）
padding：5px 10px；（上下5px左右10px）
padding：5px 10px 20px；（上5px左右10px下20px）
padding：5px 10px 20px 30px；（上5右10下20左30顺时针）

※border-width，style，padding都是
四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右

6.外边距margin

控制盒子和盒子之间的距离
margin-left/right/top/bottom
简写方式和padding一样

7、水平布局

——元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right共同决定。
——必须满足margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度
——若等式不成立（过度约束），等式会自动调整
调整情况：
①若七个值没有auto，浏览器会自动调整margin-right值以使等式成立。
②width、margin-left、margin-right可设置auto，若某值为auto则会自动调整auto的值以使等式成立。
③若一个宽度和一个外边距设为auto，则宽度会调整到最大，设置为auto的外边距自动为0。
④若三个值都auto，则外边距0，宽度最大。
⑤若两外边距auto，宽度固定，则会将外边距设为相同的值（平分）【利用此实现水平居中】
eg. width：xxxpx；
margin：0 auto；

8、垂直布局

——默认情况下父元素高度被内容撑开
——子元素在父元素内容区中排列
如果子元素大小超出父元素，则子元素会从父元素中溢出
给父元素使用overflow属性处理溢出
overflow-x，overflow-y，处理单方向
可选值：
visible 默认值子元素会从父元素中溢出，在父元素外部位置显示
hidden 溢出内容将会被裁剪不会显示（对文字不友好）
scroll 生成两个滚动条，通过滚动条查看完整内容
auto 根据需要生成滚动条

9、外边距的折叠

——相邻的垂直方向外边距会发生重叠现象
——兄弟元素
兄弟元素间的相邻垂直外边距取两者之间较大值
特殊情况：相邻外边距一正一负则取两者和
相邻外边距都负则取绝对值大的
   兄弟元素外边距重叠对开发有利不需要处理
——父子元素
   父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）
   父子外边距折叠会影响页面布局，需要处理
   处理方法：①可用padding-top调小盒子位置【需减height】
       ②可给大盒子加border（-top）将两个外边距隔开【需减height和小盒子margin】
       ③开启BFC/clearfix/before伪类

10、浏览器默认样式

去除浏览器默认样式（PC端页面）
默认有外边距，去除用
*{
margin: 0；
padding：0；
}
或者把重置样式表拖进去，在<head>里title下最上面加
<link rel=“stylesheet” href=“./css/reset.css”>（直接去除浏览器默认样式）或
<link rel=“stylesheet” href=“./css/normalize.css”>（对默认样式进行统一）

<ul>默认小黑点，去除用list-style:none;（去除项目符号）

11、盒子大小box-sizing

默认情况下，盒子可见框大小由内容区、内边距、边框共同决定
box-sizing用来设置盒子尺寸计算方式（设置width、height作用）
可选值：
content-box默认值，宽度高度用来设置内容区大小。盒子大小=width+padding+border
border-box设置整个盒子可见框大小（内容区、内边距、边框之和）盒子大小=width

12、轮廓阴影和圆角

①轮廓outline

outline 设置元素轮廓，用法和border一样（轮廓不影响可见框大小）

②阴影box-shadow

box-shadow 设置元素阴影效果（阴影不影响页面布局）
写法：box-shadow：10px 10px 10px black；
第一个值：水平偏移量，正值向右负值向左
第二个值：垂直偏移量，正值向下负值向上
第三个值：阴影模糊半径
第四个值：阴影颜色，一般用rgba，最后一个透明值

③圆角border-radius

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
用法
border-top-left-radius：50px；（半径为50的圆角）
border-top-left-radius：50px 100px；（水平50半径垂直100半径）
border-radius：50px；（四个角都是50半径）
border-radius：10px 20px 30px 40px；
（四个值：左上右上右下左下
三个值：左上右上左下右下
两个值：左上右下右上左下）
border-radius：50%；（圆形）

三、浮动

1、浮动（float）

可选值：
none默认值，不浮动
left 元素向左浮动
right元素向右浮动
注：元素设置浮动后，水平布局不需要强制成立等式
【想并排排列，可以每个div都设置float】

2、浮动特点

Ⅰ、
①完全脱离文档流，不占据文档流位置元素下的还在文档流中的元素会自动向上移
②浮动可使一个元素向其父元素左侧或右侧移动
③浮动元素默认不会从父元素中移出
④浮动元素向左或向右移动时不会超过它前边的其他浮动元素
⑤如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
⑥浮动元素不会超过它上边浮动的兄弟元素，最多和他一样高
Ⅱ、
①浮动元素不会盖住文字，文字会自动环绕在浮动元素周围（可利用此设置文字环绕图片的效果）
②浮动后元素特点会变化，脱离文档流的特点：
1>块元素：
块元素不在独占一行
宽度高度默认被内容撑开
2>行内元素
变成块元素，特点和块元素一样

【脱离文档流后不再区分块和行内】

3、高度塌陷和BFC

高度塌陷：浮动布局中，父元素高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，无法撑起父元素高度，导致父元素高度丢失。

BFC：Block Formatting Content 块级格式化环境，css中隐含属性，开启BFC该元素会变成一个独立布局区域。

开启BFC后元素特点：
①开启BFC的元素不会被浮动元素所覆盖
②开启BFC的元素子元素和父元素外边距不会重叠
③开启BFC的元素可包含浮动的子元素【不会塌陷】

通过特殊方式开启BFC：
①设置元素浮动（不推荐，副作用大）
②将元素设置为行内块元素（不推荐，副作用大）
③将元素overflow设置为一个非visible的值（一般hidden）

4、clear

①如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear清除浮动元素对当前元素所产生的影响。
②作用：清除浮动元素对当前元素所产生的影响
③可选值：
left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的那侧
④原理：浏览器自动为元素添加一个上外边距以使其位置不受其他元素影响

5、after伪类解决高度塌陷（最完美方案）

①可以在box1框内多加子元素box3（clear：both）【因为是表现上的问题和结构没关，所以一般不用】
②给会塌陷的box1加样式.box1::after{content:'';display:block;clear:both;}
（after伪类是行内元素所以需要转换块元素）

6、before伪类解决外边距重叠

给box1（父）加.box1::before{content=''; display=table;}
原理：将父子用空内容隔开

7、clearfix（是一个类，用时直接加）

clearfix可同时解决高度塌陷和外边距重叠的问题，当你遇到这些问题时，直接用这个类就行。
.clearfix::before,
.clearfix::after{
   content:'';
   dislay:table;
   clear:both;
}

四、定位（position）

定位是更高级的布局手段，通过定位可将元素摆到页面任意位置
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

偏移量（offset）
元素开启定位以后，可以通过偏移量来设置元素位置
top 定位元素和定位位置上边的距离（越大越向下）
bottom 定位元素和定位位置下边的距离（越大越向上）
left 定位元素和定位位置左边的距离（越大越靠右）
right 定位元素和定位位置右边的距离（越大越靠左）

1、相对定位（relative）

特点：
①元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
②参照于元素在文档流中位置进行定位（原来位置）
③相对定位会提升元素的层级（会盖住其他元素）
④相对定位不会使元素脱离文档流、性质即块.行内.行内块

2、绝对定位（absolute）

Ⅰ、特点：

①开启绝对定位后，如果不设置偏移量元素位置不会发生变化
②元素会从文档流中脱离
③绝对定位会改变元素性质，行内变成块，块的宽高被内容撑开
④绝对定位会使元素提升一个层级
⑤绝对定位相对于其包含块进行定位

Ⅱ、包含块（containing block）

——正常情况下：包含块是离当前元素最近的祖先块元素
——绝对定位下：包含块是离它最近的开启了定位的祖先元素，如果所有元素都没开启定位则根元素就是它的包含块（html根元素、初始包含块、浏览器）

Ⅲ、绝对定位元素位置

绝对定位
水平方向布局等式左边多加left、right，规则还一样。
left、right也能设auto
垂直方向布局等式左边多加top、bottom

Ⅳ、子绝父相

父级需要占位置所以用相对定位，子盒子不占位置且要在父盒子内移动故用绝对定位。

3、固定定位（fixed）

固定定位也是一种绝对定位，特点大部分和绝对定位一样
不同的是固定定位永远参照于浏览器视口进行定位

4、粘滞定位（sticky）

和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
【兼容性不好】
top值写多少就相当于在那抹了胶

5、元素层级（z-index）

需要一个整数作为参数，值越大层级越高，元素层级越高越优先显示。
如果元素层级一样，优先显示靠下的元素。
祖先的元素层级再高也不会盖住后代元素。

6、一些小技巧

Ⅰ、固定定位在版心右侧

position：fixed；
left：50%； //视口一半位置
margin-left：600px； //版心盒子的一半（以上）位置

Ⅱ、绝对定位盒子居中

position：absolute；
left：50%；                        //视口一半位置
margin-left：-100px;          //向左盒子一半
top:50%;
margin-top:-100px;

7、其他特性

①行内元素添加绝对或固定，可直接设置宽高

②块元素添加绝对或固定，不给宽高则默认内容大小

③脱标的盒子（浮动、绝对、固定）不会外边距塌陷

④绝对定位、固定定位会压住标准流所有内容，浮动不会压住标准流的文字、图片，只会压住盒子。

8、定位总结

定位模式	是否脱标	移动位置	是否常用
静态定位（static）	否	不能边偏移	否
相对定位（relative）	否（占位）	相对自身位置移动	是
绝对定位（absolute）	是（不占位）	相对带有定位的父级	是
固定定位（fixed）	是（不占位）	浏览器视口	是
粘性定位（sticky）	否（占位）	浏览器视口	否