CSS布局学习

一，CSS布局

CSS布局就是定义网页各个元素的排列方式，把元素按正确的大小，摆放在正确的位置上

传统PC端布局的三种方式，需要互相配合使用

1，普通流，标准流

2，浮动

3，定位

二，标准流

定义：浏览器在显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1，块级元素：从上往下，垂直布局，独占一行

2，行内元素或行内块元素：从左到右，水平布局，空间不够自动折行

（一）块级元素

display：block ，可设置元素为块级元素，独占一行

典型的块级元素标签：div ，p ，h ，ul ，li ，dl ，dd 等

特点：可以设置宽高，不设置的话宽度相当于父级100%，高度默认由内容撑开

（二）行内元素

display：inline ，可设置元素为行内元素，可以在一行显示，如果超过宽度，会自动换行

行内元素标签：a ，span ，img ，strong ，ins ，em 等

特点：不能设置宽高，宽高由内容撑开

（三）行内块元素

display：inline-block ，可以设置元素为行内块元素（也就是内联块级元素）

行内块元素标签：input ，text area ，button ，select ，img

特点：一行可以显示多个，可以设置宽高，融合了块元素和行内元素

总结应用：块元素、行内元素、行内块元素，三者是可以相互转化的，转化为哪一类根据布局的                      需求来进行调整，例如a标签，想要给它设置宽高，那么就设置a标签为块元素，添加                      display：block转化；想要多个div显示在一行还可以设置宽高，设置display：                              inline- block转为行内块元素，就得到想要的结果。

（四）其他

display：none  会让元素消失，元素位置会空出来被后面的元素顶替

visibility：hidden 也会让元素消失，但是位置会保留不会被顶替，相当于隐身效果

（五）HTML标签嵌套规范

块级元素一般作为大容器，可以嵌套文本、块级元素、行内元素、行内块元素

注：p 标签不要嵌套div  p   h  块级元素

       a 标签内部除了不能再次嵌套a 标签之外，其余元素均可嵌套

三，浮动

float  浮动，浮动元素会脱离标准流，从左到右，从上到下排列

CSS 选择器{

      float：left / right / none （元素向左浮动 / 元素向右浮动 /元素不浮动，默认）

}

1，浮动的元素会具有行内块元素的特征

2，浮动元素经常和标准流父级搭配使用：

浮动元素的活动范围只能在父级范围内，为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置（从上往下标准流，从左往右用浮动）

3，display：inline-block会产生缝隙，解决方法

 手动删除空格；

 父元素设置font-size：0，但是子元素会继承，所以需要给子元素单独设置；

 float：left ，也可以去除缝隙 

三，定位

定位是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，可以压住其他盒子

定位：将盒子定在某一个位置

定位 = 定位方式 + 边偏移（最终位置）

语法结构：

选择器{

    position：定位模式

    边偏移属性：具体的距离

}

（一）边偏移

就是定位的盒子移动到最终位置

有四个属性：top ，bottom ，left ，right 

（二）定位模式

1，相对定位：relative 

选择器{ position：relative }

特点：移动位置的时候参照点是自己原来的位置，原来在标准流中的位置还在，所以相对定位并               没有脱标；最典型的应用是给绝对定位做参照。

2，绝对定位：absolute

特点：绝对定位是元素在移动位置的时候，是相对于它祖先元素或父级来说的

位置取决于最近的，有定位的祖先元素，

如果没有祖先元素或者祖先元素没有定位，则以 body 标签定位，也就是以浏览器的左上角为基点

而且不再占原来的位置

 

 

3，固定定位：fixed

      不随滚动条滚动，固定在一个位置不动

4，静态定位：static（不常用）

5，粘性定位：sticky（不常用）

四，其他

1，定位叠放次序：z-index

  用来定位盒子的前后次序，

  （注：只有定位的盒子才有 z-index 属性 ）

 2，绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin：0 auto；居中，但可以设置

left：50%；让盒子左侧移动到父级元素中心位置；

margin-left：-（宽度的一半）；让盒子左移自身宽度的一半；

 同理，也可垂直居中，将 left 改为 top 即可

 3，防止盒子变大

如果设置了宽高后，设置边框和内边距，边框和内边距的数值会撑大盒子，为了不影响布局，

可以设置 box-sizing 属性来避免盒子被撑大的现象

box-sizing：content-box ；width宽度是内容区域的宽

                      border-box ；width宽度是内容区域+边框+内边距一起的值

4，圆角：border-radius

经常使用到的是将边框变为圆形；设置border-radius：50%；或者50%以上即可

设置边框圆角，分上右下左，顺时针

也分为

一个值：四个角同时使用；

两个值：左上右下，右上左下（对角一样）

三个值：左上，右上左下，右下

两个半径（椭圆）：水平半径/垂直半径；（中间用斜线隔开）

 5，overflow 溢出

overflow：visible；溢出不做处理

                   hidden；超出部分隐藏，没有滚动条

                   croll；超出部分隐藏，有滚动条

                   auto；按需出现滚动条

6，阴影：box-shadow

分为内阴影、外阴影、多阴影

7，轮廓：outline

 outline：none；去除轮廓线，常使用在 input 框