重头学习html5+css3系列笔记（7）

最新推荐文章于 2024-07-18 10:53:00 发布

shadow fish

最新推荐文章于 2024-07-18 10:53:00 发布

阅读量369

点赞数

分类专栏：笔记文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_45862085/article/details/108954266

版权

笔记专栏收录该内容

24 篇文章 2 订阅

订阅专栏

盒子阴影

可以使用box-shadow属性
box-shadow: h-shadow v-shadow blur spread color inset;

项目	Value
h-shadow	必需水平阴影的位置，允许负值
v-shadow	必需垂直阴影的位置，允许负值
blur	可选模糊距离
spread	可选阴影的尺寸
color	阴影的颜色
inset	可选讲外部阴影（outset）改为内部阴影

盒子的阴影不占用空间，不影响布局

文字阴影

文本 text-shadow
text-shadow : h-shadow v-shadow blur color

浮动

网页布局的本质将css摆放到相应的位置上
传统网页布局的三种方式：
普通流：标签按照规定好的默认方式排列，即前边所需的都是标准流
浮动
定位

浮动最典型的应用就是让多个块级标签一行内排列
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
属性值有：left（元素向左浮动）right（元素向右浮动）none（元素不浮动默认值）

浮动特性

浮动元素会脱离标准流的控制（浮）移动到指定位置（动）（脱标）
浮动元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性
浮动的盒子不再保留原先的位置，也就是后续盒子会代替浮动盒子的位置
如果多个盒子设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相贴合在一起的（不会有缝隙，区别于行内块），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐（比如当缩小浏览器视窗时，在一行的盒子会因为宽度减小容纳不下使最后浮动上来的盒子重起一行）
任何元素都可以添加浮动，添加浮动后具有行内块元素相似的特性，如果是块级元素，不设置宽度时会继承父元素的宽度，浮动后如果不设置宽度高度则由内容撑开

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

为了约束浮动元素的位置：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置（这时子元素以父元素为浮动标准，即将浮动元素限制在一定范围内）

浮动的一些小经验

一个盒子内有多个盒子，当其中一个盒子浮动了，剩余的兄弟盒子也应该要浮动，以防止发生问题，例如当第一个盒子浮动，后续不浮动时，后边的将会代替浮动元素的位置，同时被浮动元素代替。当第二个盒子浮动，第一个不浮动时，第一个盒子依然是标准流，独占一行，第二个盒子会浮动，但位置不会变，但是后续盒子会跑上来被覆盖。即浮动的盒子只会影响后边的标准流，不会影响前边的标准流，标准流只会不断往上填补位置，并独占一行（感觉和图层很类似，浮动后会上浮一层）

清除浮动

当不给盒子设置高度时，浮动内部元素，会造成盒子高度为0（浮动元素不占用空间），导致后边的盒子会移动上来，对后面的元素排版产生影响，但有时候我们又无法设置高度（不知道其具体高度），该怎么办？我们需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下边的标准流了
语法：选择器 { clear : 属性值｝
属性值：left（不允许左侧有浮动元素，清除左侧浮动影响）
right（同上，但为右侧）
both （左右两侧都清除），一般只用这个
清除浮动的策略：闭合浮动，只让浮动元素在父盒子内部影响，不影响父盒子外部的其他盒子
清除浮动的本质：清除浮动元素脱离标准流造成的影响

清除浮动的方法

额外标签法，也成为隔墙法，w3c推荐
父级元素添加overflow属性
父级添加after伪元素
父级添加双伪元素

方法一：
会在浮动元素末尾添加一个空的标签（必须是块元素），设置元素清除属性

 <div style="clear: both;"></div>

优点：通俗易懂书写方便
缺点：添加无意义的标签，结构化比较差
因此虽然被推荐，但是不常用
听了以后还是有点模糊，那为什么父盒子没有以最后一个清除元素的高度为高度呢？即应该是仅仅被清除元素撑大，后来查阅了w3c，才明白是加了所谓清除空间：

在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1
中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

方法二
给父元素添加overflow 属性，将其属性设置为hidden,auto 或scroll
优点：代码简洁
缺点：无法显示溢出的部分

方法三
给父元素添加伪元素 :after 伪元素法
是额外标签法的升级版

 .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
            /* IE6,7专有 */
        }

优点：没有增加标签，结构简单
缺点：照顾低版本浏览器

方法三
双伪元素清除浮动，也是给父元素添加

 .clearfix {
            *zoom: 1;
            /* IE6,7专有 */
        }
 .clearfix:after,
 .clearfix:before {
            content: '';
            display: table;
        }
 .clearfix:after{
            clear: both;
            
        }