css世界学习笔记(一)

布满荆棘的人生 2021-07-26 15:02 603阅读 0赞

**目录**

1.清除浮动

2.除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性

3.平顺的滚动效果用iScroll

4.三无 => 无宽度，无图片， 无浮动

5.宽度分离, 方法一:父元素定宽,子元素width:auto 方法二:使用盒模型 box-sizing:border-box

6.height:auto 就是有几个元素盒子累加

7.父级没有具体高度值的时候，height:100%会无效

8.让height:100%生效,

方法一: 设定显式的高度值

方法二:使用绝对定位

9.object-fit:contain，则图片会以保持比例图片，尽可能利用 HTML 尺寸但又不会超出的方式显示

10. content 属性有哪些方法

attr()

url()

'\\A'换行特性

计数器

两个属性（counter-reset 和 counter-increment）和一个方法（counter()/counters())

11. :empty选择器(选择没有内容的元素节点)

12. padding

管道符 |

三道杠

圆环

13. margin

多列布局最后一个 item 总是多一个margin

一侧定宽的两栏自适应布局效果

margin 合并

margin:auto

margin:auto 却无法垂直居

绝对定位下的 margin:auto 居中

margin 无效情形解析

14. border

border-color 默认颜色就是 color 色值

transparent

绘制三角形

--------------------

## 1.清除浮动 ##

.clear:after { 
         content: ''; 
         display: table; // 也可以是 block，或者是 list-item 
         clear: both; 
    }

## 2.除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性 ##

## 3.平顺的滚动效果用iScroll ##

## 4.三无 => 无宽度，无图片， 无浮动 ##

## 5.宽度分离, 方法一:父元素定宽,子元素width:auto 方法二:使用盒模型 box-sizing:border-box ##

## 6.height:auto 就是有几个元素盒子累加 ##

## 7.父级没有具体高度值的时候，height:100%会无效 ##

## 8.让height:100%生效, ##

### 方法一: 设定显式的高度值 ###

html, body { 
     height: 100%; 
    }

###  方法二:使用绝对定位 ###

div { 
     height: 100%; 
     position: absolute; 
    }

> ps:绝对定位元素的宽高百分比计算会将 padding 计算在内,非绝对定位不会

## 9.object-fit:contain，则图片会以保持比例图片，尽可能利用 HTML 尺寸但又不会超出的方式显示 ##

## 10. content 属性有哪些方法 ##

###     attr() ###

img::after { 
     /* 生成 alt 信息 */ 
     content: attr(alt);
    }

###     url() ###

<img src="laugh.png"> 
    
    img:hover { 
     content: url(laugh-tear.png); 
    }
    
    // 可以通过hover来切换图片

> ps : 使用 content 生成图片，我们是无法设置图片的尺寸 可以考虑svg矢量图片

:after { 
     content: ''; 
     display: inline-block; 
     width: 6px; 
     height: 6px; 
     background: url('blank.gif'); 
    }
    // 用background这样图片大小可以控制

###  '\\A'换行特性 ###

div::after { 
     content: '\A';
    }

###  计数器  ###

### 两个属性（counter-reset 和 counter-increment）和一个方法（counter()/counters()) ###

/* 计数器名称是'cont ', 并且默认起始值是 2 */ 
    .xxx { counter-reset: cont 2; }  //重置

.counter { 
     counter-reset: cout 2; // 重置计数器名cout 值 2
     counter-increment: cout ;  // 累加1
    } 
    .counter:before { 
     content: counter(cout);  // 结果3
    } 
    <p class="counter"></p>

counters可用作目录结果呈现,使用方法另一篇博客.

## 11. :empty选择器(选择没有内容的元素节点) ##

div:empty{
        backgroud:#000;
    }
    // 把没有内容的div设置背景色黑色

## 12. padding ##

### 管道符 |  ###

//html
    <a href="">登录</a><a href="">注册</a>
    
    // CSS：
    a + a:before {
        content: "";
        font-size: 0;
        padding: 10px 3px 1px;
        margin-left: 6px;
        border-left: 1px solid gray;
    }

![20200426005311497.png][]

###  三道杠  ###

.icon-menu { 
     display: inline-block; 
     width: 140px; height: 10px; 
     padding: 35px 0; 
     border-top: 10px solid; 
     border-bottom: 10px solid; 
     background-color: currentColor; 
     background-clip: content-box; //规定背景的绘制区域,默认是border-box
    }

![2020042601095143.png][]

### 圆环 ###

.icon-dot { 
     display: inline-block; 
     width: 100px; height: 100px; 
     padding: 10px; 
     border: 10px solid; 
     border-radius: 50%; 
     background-color: currentColor; 
     background-clip: content-box; 
    }

###  ![20200426011333116.png][] ###

## 13. margin  ##

### 多列布局最后一个 item 总是多一个margin  ###

![20200427010608768.png][]

此时就可以用父元素 负数margin 撑开20px空间就完美适应了

ul { 
     margin-right: -20px; 
    } 
    ul > li { 
     float: left; 
     width: 100px; 
     margin-right: 20px; 
    }

不考虑ie8可以用

li:nth-of-type(3n) { 
     margin-right: 0; 
    }

### 一侧定宽的两栏自适应布局效果 ###

（1）如果图片左侧定位：
    .box { overflow: hidden; } 
    .box > img { float: left; } 
    .box > p { margin-left: 140px; } 
    <div class="box"> 
     <img src="1.jpg"> 
    <p>文字内容...</p>
    </div>

（2）如果图片右侧定位：只要图片的左浮动改成右浮动，文字内容的左 margin 改成右
    margin 即可。
    .box { overflow: hidden; } 
    .box > img { float: right; } 
    .box > p { margin-right: 140px; }
    <div class="box"> 
     <img src="1.jpg"> 
     <p>文字内容...</p>
    </div>

// 3.图片右侧定位
    .box { overflow: hidden; } 
    .full { width: 100%; float: left; } 
    .box > img { float: left; margin-left: -128px; } 
    .full > p { margin-right: 140px; } 
    <div class="box"> 
     <div class="full"> 
    <p>文字内容...</p>
     </div> 
     <img src="1.jpg"> 
    </div>

### **margin** 合并 ###

>  块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。

(1）块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。

(2 ） 只发生在垂直方向 ，

**margin**  合并的  3  种场景

1. 相邻兄弟元素

2. 父级和第一个 / 最后一个子元素

> 对于  margin-top  合并，可以进行如下操作（满足一个条件即可）： 
> 
>  
> 
> 父元素设置为块状格式化上下文元素；overflow:hidden
> 
>  
> 
> 父元素设置  border-top  值； 
> 
>  
> 
> 父元素设置  padding-top  值； 
> 
>  
> 
> 父元素和第一个子元素之间添加内联元素进行分隔。 
> 
> 对于  margin-bottom  合并，可以进行如下操作（满足一个条件即可）： 
> 
>  
> 
> 父元素设置为块状格式化上下文元素；overflow:hidden 
> 
>  
> 
> 父元素设置  border-bottom  值； 
> 
>  
> 
> 父元素设置  padding-bottom  值； 
> 
>  
> 
> 父元素和最后一个子元素之间添加内联元素进行分隔； 
> 
>  
> 
> 父元素设置  height 、 min-height  或  max-height 。
> 
>

### margin:auto ###

<div> 宽度被限制成了  200px ，无法自动填充外部容器的可用宽度了

假设外部的容器宽度是  300px ，则有  100px  的宽度原本应该自动填满的，现在因为  width

设置而闲置，而  margin:auto  就是为了填充这个闲置的尺寸而设计的！

**margin:auto 的填充规则如下。**

**（1）如果一侧定值，一侧 auto，则 auto 为剩余空间大小。**

**（2）如果两侧均是 auto，则平分剩余空间。**

如果想让某个**块状元素右对齐**，脑子里不要就一个  float:right ，很多时候， margin-

left:auto  才是最佳的实践，浮动毕竟是个“小魔鬼”。我甚至可以这么说： margin  属性的

auto  计算就是为块级元素左中右对齐而设计的，和内联元素使用  text-align  控制左中右对

齐正好遥相呼应！

## ##

### margin:auto 却无法垂直居 ###

> 原因在于触发  margin:auto  计算有一个前提条件，就是  width  或  height  为  auto  时， 
> 
> 元素是具有对应方向的自动填充特性的。比方说这里，假如说把 .son  元素的  height:100px  去 
> 
> 掉， .son  的高度会自动和父元素等高变成  200px  吗？显然不会！因此无法触发  margin:auto 
> 
> 计算，故而无法垂直居中。

### 绝对定位下的 margin:auto 居中 ###

.father { 
     width: 300px; height:150px; 
     position: relative; 
    }
    
    .son { 
     position: absolute; 
     top: 0; right: 0; bottom: 0; left: 0; 
     width: 200px; height: 100px; 
     margin: auto; 
    }

### **margin** 无效情形解析 ###

1.display 计算值 inline 的非替换元素的垂直 margin 是无效的.

2.表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的**98** 第 4 章 盒尺寸四大家族 元素的 margin 都是无效的。

3.margin 合并的时候，更改 margin 值可能是没有效果的。以父子 margin 重叠为例，

假设父元素设置有  margin-top:50px ，则此时子元素设置  margin-top:30px  就没有任何

效果表现，除非大小比  50px  大，或者是负值

4.绝对定位元素非定位方位的  margin  值“无效”。 top时 margin-bottom无效,其他有效

5.定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的

定位“失效”。

</div>

.box > img \{

float: left;

width: 256px;

.box > p \{

overflow: hidden;

margin-left: 200px;

## 14. border ##

实现三道杠

![20200428003327768.png][]

.icon-menu { 
     width: 120px; 
     height: 20px; 
     border-top: 60px double; 
     border-bottom: 20px solid; 
    }

###  border-color 默认颜色就是 color 色值 ###

实现

![20200428004929953.png][]transparent

// html
    
    <a href class="add" title="继续上传">
      添加图片
    </a>
    
    // css
    .add {
        display: inline-block;
        width: 76px; height: 76px;
        color: #ccc;
        border: 2px dashed;
        text-indent: -12em;
        transition: color .25s;
        position: relative;
        overflow: hidden;
    }
    .add:hover {
        color: #34538b;
    }
    .add::before, .add::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }
    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }

### transparent ###

撑开可点击区域 border: 20px solid transparent;, 撑开padding 容易影响布局

### 绘制三角形 ###

div { 
     width: 0; 
     border: 10px solid; 
    border-color: #f30 transparent transparent; 
    }

参考文献:张鑫旭<css世界>

[20200426005311497.png]: /images/20210726/fe211c3ec32a47218cc19c2e2d6ca0c0.png
[2020042601095143.png]: /images/20210726/ad737949e01c4d1aac4b2c4be8249bb0.png
[20200426011333116.png]: /images/20210726/82bfb1781b104a2dbf86bfaeb8e1c950.png
[20200427010608768.png]: /images/20210726/e2d3df9929374a8fb89eef1ad22f23b2.png
[20200428003327768.png]: /images/20210726/1ca6c161fbeb41b7a396f9466b37d648.png
[20200428004929953.png]: /images/20210726/12a01772d20c4965aca75679ff9e78c3.png