CSS学习中的一些易错点（三）

最新推荐文章于 2022-12-03 00:18:41 发布

你的宣妹

最新推荐文章于 2022-12-03 00:18:41 发布

阅读量628

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/cherreggy/article/details/122777956

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

%：百分比单位以父元素为基准，如果父元素的高度不能确定，是无法显示的
具有默认样式的标签：body（margin）、h1（上下margin）、p（上下margin）、ul（上下margin和左padding list-style点样式）、a（cursor、underline）
内联元素以文字的基线进行对齐而不是底线，会导致插入图片后容器底部有一些空隙，可以通过vertical-align属性设置为bottom解决，或者将display属性转换为block
蓝湖等设计辅助软件可以提供Photoshop切图插件便于工作
float浮动的注意事项：
○ 只会影响后面的元素，排在其前面的元素依然在原位
○ 下层的文字无法插入到浮动元素中，可以利用这个特点做文字混排的效果
○ 默认宽度根据内容长度决定
○ 嵌套浮动内部元素会影响外部元素
○ 主要给块元素添加，也可以给内联元素添加使其靠左靠右排列
clear可以清除浮动效果，但是要看好是left、right还是both
同时设置float和clear属性，则该元素不会包围前面的float元素
父容器在有float属性的子容器时，想要去除float效果的影响，还保持原来的布局，例如父容器的高度想随子元素变化但是子容器有float属性不受控制，下面的方法可以解决：

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    
	    <style>
	        body{border: orange 1px solid;}
	        #box{background-color: red; height: 100px; width: 100px; float: left;}
	        #box1{width: 200px; border: black 1px solid;}
	        /* 解决方案，设置类为如下属性 */
	        .clear::after{content: ''; display: block; clear: both;}
	    </style>
	<body>
	    <div class='clear' id="box1">  <!--父容器，为其设定一个类-->
	        <div id = 'box'>  <!--子容器-->
	        </div>
	    </div>      
	</body>
	</html>