css 基础+实战布局

作者: 赵碧菡 | 来源:发表于2017-12-10 18:14 被阅读0次

一、margin

margin与可视尺寸

适用于，没有设定width/height的普通block水平元素
只适用于水平方向

利用这一特性实现一侧定宽自适应布局

图片.png

margin与占据尺寸

适用于block/inline-block水平元素，inline元素可设置margin-left和margin-right，设置margin-top、margin-bottom 无效。
与有没有设定width/height值无关
适用于垂直和水平方向

百分比margin

垂直和水平方向的百分比都是相对于父元素的宽度计算的

margin重叠

block元素，不包括float和absolute元素
只发生在垂直方向（margin-top/bottom）

margin重叠的情境

相邻的兄弟元素

图片.png
父级和第一个/最后一个子元素

图片.png
图片.png
空的block元素

图片.png
图片.png

margin中auto

auto 适用设置固定宽度的块元素

一侧是定值，一侧auto，auto为剩余空间大小（如果只设置margin-right：100px，是不生效的）

图片.png
两侧都是auto，则会居中显示
垂直居中显示
```
.father{
  height:200px;width:400px; writing-mode:vertical-lr

 .son{
   height:100px;width:100px;margin:auto;
 }
```
给父级设置样式writing-mode:vertical-lr改成垂直流布局，子元素设置样式;margin:auto，这种情况水平方向就不能居中了。

绝对定位元素设置auto，水平垂直都居中

图片.png

margin负值下的两端对齐

margin改变元素尺寸
列表两端对齐，每个元素之间还设置margin值

图片.png

margin失效情形

inline水平元素的垂直margin无效
margin重叠
display:table-cell/display:table-row 等声明的margin无效
绝对定位元素非定位的margin值“无效”
比如不给绝对定位元素设置bottom值，设置margin-bottom值是无效的，margin-right一样。

二、overflow

注意：

如果overflow-x 和 overflow-y 值相同等同于 overflow
如果overflow-x 和 overflow-y 其中一个设置为visible（默认值），另一个设置成hidden、auto、，设置visible的会被重置成 auto

使用条件

非display：inline水平
对应方位的尺寸限制。
width/height/max-width/max-height/absolute拉伸
对于单元格 td 等，还需要Table为 table-layout：fixed 状态才行

浏览器兼容问题

浏览器IE7，文字越多，元素两侧padding留白就越大

解决办法：给元素添加样式 overflow：visible

overflow与滚动条

默认滚动条来自 <html>，而不是<body>标签。

去除页面默认滚动条，只需

html{overflow:hidden}

JS获取滚动条高度

谷歌：document.body.scrollTop
其他：document.documentElement.scrollTop

兼容写法

var top=`document.body.scrollTop || document.documentElement.scrollTop

滚动条会占用容器的可用宽度和高度

图片.png

1、水平居中跳动问题修复（当出现滚动条时，页面右侧会有空白）

解决办法：

html{overflow-y:scroll}
.container{padding-left:calc(100vw-100%)}，100vw是浏览器宽度，100% 是可用内容宽度

2、overflow与两栏自适应布局（左侧浮动，右侧自适应）

图片.png

解决办法给右侧 div 加css样式overflow:hidden

图片.png

overflow与absolute

overflow：hidden失效
子元素绝对定位时
解决办法：给overflow元素添加 position：relative

三、float

自适应布局，右侧固定，左侧自适应

图片.png

   <div class="warp-right">
        <div class="content-left"> .....  </div>
        <img src="./135.jpg" alt="" srcset="">
   </div>

.content-left{
   float: left;
   margin-right: 80px;
}
 .warp-right  img{
     float: left;
     width: 50px;
     margin-left: -50px;
}

自适应布局，左侧固定，右侧自适应

图片.png

   <div class="warp-right">
        <img src="./135.jpg" alt="" srcset="">
        <div class="content-right"> .....  </div> 
   </div>

 .warp-right  img{
     float: left;
     width: 50px;
}
.content-right{
   overflow: hidden;
}

四、absolute

小图标，absolute的应用

图片.png

这样布局的好处

导航中，当内容改变时，小图标的位置也会跟着移动，不会出现重叠的现象（自适应）
不用给父级设置position，当父级改变时也不受影响

absolute + margin实现下拉框

图片.png

这种实现方式自适应比较强，当浏览器大小改变时，位置不容易发生改变。

文本图标对齐

图片.png

absolute 与整体布局

使div占满整个屏幕，使用拉伸

<body>
    <div class="page"></div>
</body>

 body{
        width: 100%;
        height: 100%;
    }
.page{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

头、侧边栏、内容区、底部，布局

图片.png

绝对定位整个页面布局

图片.png

absolute 元素垂直水平居中

水平居中

  .box{
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      margin: auto;
  }

垂直居中

.box{
     position: absolute;
     width: 100px;
     height: 100px;
     top: 0;
     bottom: 0;
     margin: auto;
 }

注意： 设置absloute 可以使 inline元素具有block元素的特性

五、line-height

对内联元素、table-cel 起作用
内联元素是由行高决定的
行高具有继承性
内容区域高度+行间距=行高
内容区域高度与字体和字号有关，与line-height无关
字体为宋体时，内容区域高度=font-size大小

body全局数值行高使用经验，匹配20像素

body{font-size:14px;line-height:1.4286}    // 20/14

line-height 的实际应用

图片垂直居中（接近居中）

图片.png

多行文本垂直居中

图片.png

六、vertical-align

vertical-align 的百分比值是相对于 line-height计算的

vertical-align 起作用的前提

inline ，inline-block 水平元素
table-cell 元素

默认情况下（不对元素display设置）支持vertical-align的有：
图片、文字、按钮、单元格

实战布局

<p><img src=" "/></p> 使图片垂直居中

p{display:table-cell; vertical-align:middle}

图片和文字始终垂直居中对齐

图片.png

<div>
   <span>文字</span>
  <img src=" "/>
</div>

span{display:inline-block;width:200px;vertical-align:middle}
img{vertical-align:middle}

小图标和文字对齐
vertical-align 负值
不定尺寸图片或多行文字垂直居中

图片.png

图片.png

七、relative

relative 与 absolute

限制absolute元素定位

图片.png
限制层级
absolute 外层没有被relative元素包裹时，层级高的在上面

图片.png

当外部被relative元素包裹时，层级关系就由relative元素设置的 z-index 来控制

图片.png

限制超越 overflow
overflow：hidden，对absolute元素是不起作用的。给absolute外层父元素设置relative、overflow：hidden，可以限制超越

图片.png

relative 与 fixed

限制层级

relative 定位

相对自身原来位置定位，还占有原来的位置。

八、z-index

不考虑css3的情况下，只有定位的元素才起作用（position:relative/absolute/fixed/sticky）不包括static

z-index 与定位元素

如果定位元素 z-index 发生嵌套，祖先优先原则，（z-index 为数值）

图片.png

z-index 相关实践

图片.png

九、padding

对于 block 元素
padding值暴走（超过宽），一定会影响尺寸
width 非auto（设置固定宽度），会影响尺寸
width为 auto 或者 box-sizing：border-box，同时padding没有暴走，不影响尺寸。
对于inline 水平元素
水平 padding 影响尺寸，垂直padding 不影响尺寸，但是会影响背景色。

padding 百分比

是相对于元素的宽，利用这一特性可以实现正方形

标签元素padding

所有浏览器 radio/checkbox 单选框无内置padding

十、border

dashed 虚线
dotted 点线
double 双线

border实现三角

图片.png

第一种

图片.png

.triangle{
      border-width:12px 20px;
      border-style: solid;
      border-color:gold gold transparent transparent;
}

drop-shadow 给 png 图标赋色

图片.png

icon{filter:drop-shadow(20px 0 #ff8040)}

十一、背景图像

背景图像区域

background-clip属性
指定背景绘制区域
background-clip：border-box | padding-box | content-box
参数说明：
- border-box：背景被剪裁到边框（内容区+padding区+边框区都显示背景）
  
  图片.png
- padding-box：背景被剪裁到内边距框（内容区+padding区）
  
  图片.png
- content-box：背景被剪裁到内容框（内容区显示背景）
  
  图片.png

背景图像定位

background-origin属性（兼容性需注意）
background-origin属性指定background-position属性应该是相对位置
background-origin：border-box | padding-box | content-box

背景图像大小

background-size属性
background-size:length | percentage | cover | contain
- background-size:100%
  根据元素来计算，当只设置一个参数时，背景按图片宽度等比例缩放
- background-size: 800px 固定尺寸
- background-size:cover
  将背景图片等比缩放以填满整个容器，不留白
- background-size：contain
  即将背景图片等比缩放至某一边紧贴容器边缘为止（会留白）

十二、css 渐变

渐变可以在两个或多个指定颜色之间显示平稳的过渡

线性渐变

是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变
background：linear-gradient(direction,color-stop1,color-stop2,.......)

从上到下（默认）
background：linear-gradient(color-stop1,color-stop2,.......)
图片.png

从左到右

不同浏览器内核，写的方式不一样

background:-webkit- linear-gradient(begin-direction,#44A504,#C5DF99)
background:    -moz-linear-gradient(end-direction,#44A504,#C5DF99)
background  :    -o-linear-gradient(end-direction,#44A504,#C5DF99)
background:          linear-gradient(to end-direction,#44A504,#C5DF99)

实例

background:-webkit- linear-gradient(left,#44A504,#C5DF99)
background:    -moz-linear-gradient(right,#44A504,#C5DF99)
background  :    -o-linear-gradient(right,#44A504,#C5DF99)
background:          linear-gradient(to right,#44A504,#C5DF99)

图片.png

对角

background:-webkit- linear-gradient(begin-level begin-vertical,#44A504,#C5DF99)
background:    -moz-linear-gradient(end-level end-vertical,#44A504,#C5DF99)
background  :    -o-linear-gradient(end-level end-vertical,#44A504,#C5DF99)
background:          linear-gradient(to end-level end-vertical,#44A504,#C5DF99)

实例

background:-webkit- linear-gradient(left top,#F84812,#DFC999);
background:    -moz-linear-gradient(right bottom,#F84812,#DFC999);
background  :    -o-linear-gradient(right bottom,#F84812,#DFC999);
background:          linear-gradient(to right bottom,#F84812,#DFC999);

图片.png

多个颜色

background: linear-gradient(to right,#44A504,#A0F387,r#DFA209,#DFC999);

图片.png
在颜色后面加 百分比

 background: linear-gradient(to right,#44A504 10%,#A0F387 40%,#DFA209 60%,#DFC999) 100%;

从 10% 到 40% 是从 #44A504 到 #A0F387 的渐变
从 40% 到 60% 是从 #A0F387 到 #DFA209 的渐变
从 60% 到 100% 是从 #DFA209到 #DFC999 的渐变

最后一个不写默认是 100%，第一个不写默认是0

透明度渐变

background:linear-gradient(to right, rgba(255, 0, 0, 0),rgba(255, 0, 0,1));

图片.png

十三、css 盒阴影 box-shadow属性

box-shadow属性可以设置一个或多个下拉阴影的框
box-shadow：h-shadow v-shadow blur spread color inset

参数说明：

h-shadow 水平方向偏移量
v-shadow 竖直方向偏移量
blur 模糊度，不能设赋值
spread 扩展多少
color：颜色
inset 内阴影还是外阴影

只设置了偏移量，没有设置模糊度

图片.png

十三、边界图片 border-image

border-image-source属性

指定要是用的图像，而不是由border-style属性设置的边框样式。

border-image-slice属性

指定图像的边界向内偏移
border-image-slice：number | % | fill

border-image-width属性

十四、选择器

子元素选择器

只能选择某元素的子元素（直接后代选择器）

语法格式： 父元素 > 子元素

图片.png

相邻兄弟元素选择器

相邻兄弟元素选择器可以选择紧接在另一元素后的兄弟元素，他们具有一个相同的父元素

语法格式：元素 + 兄弟相邻元素

图片.png
例子：选择除了第一个 li 以外的 li ul li + li{}

通用兄弟选择器

选择某元素后面的所有兄弟元素，他们具有一个相同的父元素

语法格式：元素 ~ 后面兄弟元素

图片.png

属性选择器

Element [ attribute ]

为带有 attribute 属性的 Element 元素设置样式
```
 a[href]{color:red}
 a[href="#"]{color:red}
```
Element [ attribute ~="value" ]

选择 attribute 属性包含单词 “value”的元素，并其设置样式

图片.png
Element [ attribute ^="value" ]

选择 attribute 属性值以 “value”开头的元素，并其设置样式

图片.png

Element [ attribute $="value" ]

选择 attribute 属性值以 “value”结尾的元素，并其设置样式
Element [ attribute *="value" ]

设置attribute 属性值包含 “value” 的所有元素样式

图片.png
Element [ attribute |="value" ]

选择 attribute 属性值为 "value" 或以 "value—" 开头的元素，并设置样式。

图片.png

伪类选择器

动态伪类选择器

这些伪类并不存在html 中，只有当用户和网站交互的时候才能体现出来

锚点伪类： :link :visited （链接/访问过）
用户行为伪类：:focus :hover :active （获取光标/鼠标经过/正在访问）
UI元素伪类
- :enabled：可编辑的
- :disabled ：禁用的
- :checked
  图片.png

结构伪类

Element ：first-child

选择属于其父元素的首个子元素的每个 Element 元素

图片.png
图片.png
Element ：last-child

选择属于其父元素的最后一个子元素的每个 Element 元素
Element ：nth-child（N）

选择器匹配属于其父元素的第 N 个子元素，不论元素类型
- nth-child（2n）偶数
- nth-child（2n+1）奇数
- nth-child（3n+1）、 nth-child（n+4）从第四个开始
- nth-child（odd）奇数、 nth-child（even）偶数
  
  图片.png
Element ：nth-last-child（N）

匹配属于其元素的第 N 个子元素的每个子元素，不论元素的类型，从最后一个子元素开始计数。
Element ：nth-of-type（N）

匹配属于父元素的 特定类型的第N 个子元素的每个元素
Element ：first-of-type
Element ：last-of-type
Element ：only-child

匹配属于其父元素的唯一子元素的每个元素（只有他自己一个孩子）

图片.png
Element ：empty

匹配没有子元素（包括文本节点）的每个元素

图片.png
否定选择器（：not）

：not（Element/selector）选择匹配非指定元素/选择器的每个元素

语法格式：父元素：not（子元素/子选择器）

css 权重

权重等级：

行内样式（1000） > ID选择器 >类、属性选择器和伪类选择器（10）>元素和伪元素（1）>*（0）
权重计算：

从0开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素或者伪元素+1
css 权重规则：
- ID 选择器（#idValue）的权重比属性选择器（[id="idValue"]）高
带有向下问关系的选择器比单纯的元素选择器权重高

图片.png
与元素 “挨得近” 的规则生效，比如嵌套css
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高
通配符选择器权重是0，被继承的 css 属性也带有权重，权重是0

伪元素

语法格式：元素：：伪元素

Element：：first-line

first-line 伪元素中的样式对 Element元素的一个行文本进行格式化，只能用于块元素

图片.png
Element：：first-letter

用于向文本的首字符设置特殊样式，只能用于块元素

图片.png
Element：：selection

用于设置在浏览器中的选中文本后的背景色与前景色

图片.png

css 基础+实战布局

一、margin

margin与可视尺寸

margin与占据尺寸

百分比margin

margin重叠

margin中auto

margin负值下的两端对齐

margin失效情形

二、overflow

使用条件

浏览器兼容问题

overflow与滚动条

overflow与absolute

三、float

四、absolute

小图标，absolute的应用

absolute + margin实现下拉框

文本图标对齐

absolute 与整体布局

absolute 元素垂直 水平 居中

五、line-height

line-height 的实际应用

六、vertical-align

vertical-align 起作用的前提

实战布局

七、relative

relative 与 absolute

relative 与 fixed

relative 定位

八、z-index

z-index 与定位元素

z-index 相关实践

九、padding

padding 百分比

标签元素padding

十、border

border实现三角

十一、背景图像

背景图像区域

background-clip属性

背景图像定位

background-origin属性 （兼容性需注意）

背景图像大小

background-size属性

十二、css 渐变

线性渐变

从上到下 （默认）

从左到右

对角

多个颜色

透明度渐变

十三、css 盒阴影 box-shadow属性

十三、边界图片 border-image

border-image-source属性

border-image-slice属性

border-image-width属性

十四、选择器

子元素选择器

相邻兄弟元素选择器

通用兄弟选择器

属性选择器

Element [ attribute ]

Element [ attribute ~="value" ]

Element [ attribute ^="value" ]

Element [ attribute $="value" ]

Element [ attribute *="value" ]

Element [ attribute |="value" ]

伪类选择器

动态伪类选择器

UI元素伪类

结构伪类

Element ：first-child

Element ：last-child

Element ：nth-child（N）

Element ：nth-last-child（N）

Element ：nth-of-type（N）

Element ：first-of-type

Element ：last-of-type

Element ：only-child

absolute 元素垂直水平居中

background-origin属性（兼容性需注意）

从上到下（默认）

否定选择器（：not）