CSS学习笔记【3】
<p>上集：CSS学习笔记【1】<br>上集：CSS学习笔记【2】</p>
<h1 id="css">CSS</h1>
<h2 id="3-css布局">3 CSS布局</h2>
<h3 id="35-内边距-padding">3.5 内边距 padding</h3>
<ol>
<li><code>padding:10px</code></li>
</ol>
<ul>
<li>给四个方向全部添加了10px内边距</li>
</ul>
<ol start="2">
<li>给一个方向单独设置</li>
</ol>
<pre><code> padding-top
padding-right
padding-bottom
padding-left
</code></pre>
<h2 id="4-背景">4 背景</h2>
<h3 id="background"><code>background</code></h3>
<ol>
<li>背景颜色: <code>red</code></li>
<li>背景图片: <code>url()</code> ()里面写图片路径<br>
注：图片作为内容可以撑起元素的高,作为背景则不可以</li>
<li>背景图片平铺:
<ul>
<li>repeat 默认值 图片会重复出现直到铺满元素</li>
<li>no-repeat图片只出现一次</li>
<li>repeat-x / repeat-y 横向重复/纵向重复</li>
</ul>
</li>
<li>背景图片定位:与no-repeat 一起使用
<ul>
<li>关键字定位</li>
</ul>
</li>
</ol>
<ul>
<li>
<pre><code>- 横向 left/center/right
- 纵向 top/center/bottom
</code></pre>
<ul>
<li>数字定位</li>
</ul>
</li>
<li>
<pre><code>- 横向npx
</code></pre>
</li>
<li>
<pre><code>- 纵向 npx
- n为正数 横向向右 纵向向下
- n为负数 横向向左 纵向向上
</code></pre>
<ul>
<li>百分比定位</li>
</ul>
</li>
<li>
<pre><code>- 横向10%:向右挪到元素宽的10%
</code></pre>
</li>
<li>
<pre><code>- 纵向10%:向下挪到元素高的10%
</code></pre>
</li>
</ul>
<ol start="5">
<li>背景图片大小</li>
</ol>
<ul>
<li><code>background-size</code>:必须单独设置 规律和img宽高一样</li>
</ul>
<h2 id="5-文本">5 文本</h2>
<ul>
<li>font-size字体大小默认值是16px</li>
<li>font-family字体</li>
<li>font-weight字体粗细默认值是normal<br>
·bold 一般粗<br>
·bolder 更粗有时不好用<br>
·lighter 细</li>
<li>font-style 斜体 默认值是normal<br>
·italic 斜体</li>
<li>color 字体颜色 默认是黑色</li>
<li>【注】边框没有设置颜色时，也会受color影响</li>
<li>text-align水平对齐方式默认值是left （center/right）</li>
<li>line-height行高 一行文字的高度 文字这这个范围内上下居中<br>
让一行文字在元素内上下居中---把行高设置成元素的高度<br>
让多行文字在元素内上下居中---<br>
【练习】让行高为30px的两行字，在300px高度的div内上下居中<br>
30*2=60<br>
300-60=240<br>
240/2=120</li>
</ul>
<h2 id="6-浮动">6 浮动</h2>
<h3 id="61-浮动定义">6.1 浮动定义</h3>
<p>CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。<br>
Float（浮动），往往是用于图像，但它在布局时一样非常有用。</p>
<h3 id="62-使用浮动">6.2 使用浮动</h3>
<ul>
<li>
<p><code>float</code><br>
·left 左浮动<br>
·right右浮动<br>
·none默认值不浮动</p>
</li>
<li>
<p>元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。</p>
</li>
<li>
<p>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</p>
</li>
<li>
<p>浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。</p>
</li>
<li>
<p>如果图像是右浮动，下面的文本流将环绕在它左边：</p>
</li>
</ul>
<pre><code>img
{
float:right;
}
</code></pre>
<h3 id="63-浮动的作用">6.3 浮动的作用</h3>
<ol>
<li>作用1.让块元素在一行内显示</li>
<li>作用2.块元素在没有设置宽度的时候，浮动后，宽度由内容决定</li>
<li>作用3.行内元素在浮动之后，设置宽高有效</li>
</ol>
<h3 id="64-清除浮动">6.4 清除浮动</h3>
<p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。<br>
clear 属性指定元素两侧不能出现浮动元素。<br>
使用 clear 属性往文本中添加图片廊：</p>
<pre><code>.text_line
{
clear:both;
}
</code></pre>
<h3 id="65-嵌套关系的浮动">6.5 嵌套关系的浮动</h3>
<pre><code>【实例】
out{
background: #ADFF2F;
}
.in{
width: 200px;
height: 200px;
background: red;
float: left;
}
</code></pre>
<p>【问题】高度坍塌<br>
参考1<br>
参考2</p>
<ul>
<li>
<p>描述<br>
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度坍塌</p>
</li>
<li>
<p>解决办法原理<br>
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context<br>
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。<br>
当开启元素的BFC以后，元素将会具有如下的特性：<br>
1.父元素的垂直外边距不会和子元素重叠<br>
2.开启BFC的元素不会被浮动元素所覆盖<br>
3.开启BFC的元素可以包含浮动的子元素</p>
</li>
<li>
<p>如何开启元素的BFC<br>
1. 设置元素浮动(不推荐)<br>
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题<br>
2. 设置元素绝对定位(不推荐)<br>
3. 设置元素为inline-block(不推荐)<br>
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式<br>
4. 将元素的overflow设置为一个非visible的值（aotu hidden）</p>
</li>
<li>
<p>推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。<br>
<code>overflow: hidden;</code></p>
</li>
</ul>
<p>但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。<br>
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做`hasLayout<br>
该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多，<br>
我们直接使用一种副作用最小的:<strong>直接将元素的zoom设置为1即可。</strong></p>
<ul>
<li>
<p>zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍</p>
</li>
<li>
<p>zoom:1表示不放大元素，但是通过该样式可以开启hasLayout</p>
</li>
<li>
<p>zoom这个样式，只在IE中支持，其他浏览器都不支持。</p>
</li>
<li>
<p><strong>解决方法</strong><br>
【错误写法】我们可以将父元素的高度写死，以避免塌陷的问题出现，<br>
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。</p>
</li>
</ul>
<ol>
<li>w3c推荐做法，在浮动元素末尾添加一个空标签，在空标签里添加 sytle = "clear:both"</li>
</ol>
<p>优点：通俗易懂，书写方便<br>
缺点：添加无意义标签，结构化差</p>
<ol start="2">
<li>给父元素添加 overflow:hidden|auto|scroll</li>
</ol>
<p>优点：代码整洁，无需添加无意义标签<br>
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示溢出的元素</p>
<ol start="3">
<li>为父元素增加伪元素 :after 方式（推荐使用）</li>
</ol>
<pre><code> .clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{*zoom:1;} /*ie67专有清除浮动属性浏览器兼容*/
</code></pre>
<p>优点：符合闭合浮动的思想 结构语义化正确<br>
缺点：由于IE6-7不支持 :after , 使用<code>zoom：1</code> 触发hasLayout</p>
<ol start="4">
<li>使用双伪元素清除浮动（推荐使用）</li>
</ol>
<pre><code> .clearfix:before,clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
</code></pre>
<p>优点：代码更简洁<br>
缺点：由于IE6-7不支持 :after , 使用<code>zoom：1</code> 触发hasLayout</p><br><br>
来源：https://www.cnblogs.com/buhuizhuzhou/p/14928290.html
頁:
[1]