P6-圆角-轮廓和阴影-浮动-高度塌陷-BFC-clear属性

LXMXHJ

已于 2022-03-25 18:44:09 修改

阅读量408

点赞数

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

于 2022-03-25 11:27:49 首次发布

本文链接：https://blog.csdn.net/LXMXHJ/article/details/123724620

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

时间
xxx

文章目录

圆角：border-radius

参数：

个数	含义
四个	左上，右上，右下，左下
三个	左上，右上左下，右下
两个	左上右下，右上左下
一个	四个角

注意

border-top-left-radius：指定的是元素左上角的圆角，需要一个长度值，指定的是圆角的半径；
长度值的单位可以是px、em
border-radius圆角，指定的是圆角的半径。半径越大，圆角弧度越大。
指定一个参数，是以一个正圆画出的圆弧；指定两个参数，使以一个椭圆画出的圆弧；其中一个参数还是两个参数表示的是四个角设置角度需要几个参数。
- 一个参数的情况：
  border-radius：5px 10px 20px 50px 表示分别设置四个角的弧度，且圆弧是以正圆画出来的；
- 两个参数的情况：
  border-radius:10px 20px 30px 40px/40px 30px 20px 10px 表示分别是指四个角的弧度，且圆弧是通过椭圆画出来的。前后两组参数一一对应，左上 = 水平半径为10px、垂直半径为40px 依次类推。
  border-radius: 2em/1em 表明四个角的弧度是由椭圆画的，水平半径是2em，垂直半径是1em；1em = 1个font-size（当前元素的字体大小font-size）
圆角属性对于老版的浏览器是不支持的，ie8不支持。
圆角只是页面中显示效果是圆角，但是占位还是原来那么大。
要想用正方形弄出一个圆形，就需要将四个角的长度弄正方形边长的一半。一般都是写50%（即占宽度的一半）border-radius：50%
轮廓和边框的区别：轮廓不影响布局，边框影响布局；轮廓在边框之外；

轮廓和阴影

轮廓

概述

轮廓就是不占空间的边框，设置轮廓不会影响元素的布局。
对于超链接有一个边框，在html页面中选中超链接所在的元素，点击tab则可看到超链接的边框。轮廓一般不会一上来就出现，往往是当鼠标移到那个位置才会显示。

语法
outline：width，color，style 三者顺序可以随便。
案例：outline：111px red solid；

阴影

box-shadow ：用来设置元素的阴影，和轮廓一样，阴影不会影响页面的布局。
具体参数介绍

参数位置	说明
第一个参数	阴影的水平偏移量正值》向右移动，负值》向左移动
第二个参数	阴影的垂直偏移量正值》向下移动，负值》向上移动
第三个参数	阴影的模糊半径值越大阴影越模糊
第四个参数	阴影的颜色

注意：

box-shadow设置的insert内部阴影。
可以设置多重阴影，每层阴影之间用逗号隔开。
案例：box-shadow: 10px 10px 5px #b8ecf8,-10px -10px 5px #b8ecf8;
阴影和轮廓案例图示

浮动

概述

使用float来设置元素的浮动，可以使元素向左或向右移动。
可选参数

参数	说明
none	默认值，不浮动
left	向左浮动
right	向右浮动

浮动的特点

设置浮动之后，元素会向页面的左侧或右侧移动；
设置浮动之后，元素会完全脱离文档流，不在占据文档流中的位置，所以它下面的元素会自动上移；
浮动元素，不会盖住没有浮动的兄弟元素，也不会浮出父元素的边框；
浮动元素，不会超过他上面的没有浮动的兄弟元素，最多一边齐；.
浮动元素，不会覆盖文字；

元素脱离文档流以后的特点

默认宽度被内容撑开；
默认高度被内容撑开；
块元素不会独占一行；
元素不会在文档流中再占据位置；
行内元素浮动以后也会脱离文档流，脱离文档流以后行内元素自动变成块元素，特点和块元素一样；

浮动作用

文字不会被浮动元素所覆盖，而是环绕在浮动元素的四周，从而我们可以利用浮动来实现一个文字环绕图片的效果。

案例

案例1：导航栏1

思路：

<head>
	<style>
		.uav{
			list-style: none;
            /*去除默认样式*/
            width: 700px;
            /*设置导航栏整体的宽度*/
            margin: 50px auto;
            /*这是导航栏的位置，上下是50px，左右自动*/
			} 		
		.uav li{
			float: left;
            /*不设置浮动，列表的展示形式是按列的形式，设置浮动，li会排一行，依次从左向右*/
            margin-left: 10px;
        /*    这是左外边距，为了是浮动的元素从左向右排列的时候两两之间有间距*/
			} 	
		.uav a{
			color: #333;
            /*    设置a标签的字体颜色*/
            text-decoration: none;
        	/*清除a标签的默认文本描述信息*/
			} 
		.nav a:hover{
			 color: red;
        	/*    设置标签选中的颜色*/
			}
		.uav .hot{
			color: red;
       	 /*    设置特殊a标签的颜色*/
		}	
	</style> 
</head>
<body>
	<!--使用一个ul-li形式写导航栏，li中放的是a标签用于点击链接的跳转-->
	<ul class="uav">
		<li class="hot"><a herf="链接地址"></li>
		<li><a herf="链接地址"></li>
	</ul>
</body>

图示：
P6浮动案例1

案例2：导航栏2

思路：

<head>
	<style>
		ul{
			background-color：设置背景颜色
			width：设置背景宽度
			height：设置背景高度
			margin：50px auto；设置外边距，使元素居中
		}
		ul a{
			/*            设置向左浮动*/
            float: left;
/*            设置高度，不设置则会默认为高度被内容撑开，表示和父元素高度一样*/
            height: 100%;
/*            去除下划线*/
            text-decoration: none;
/*            设置行高，使文字垂直居中*/
            line-height: 48px;
/*            设置字体颜色*/
            color: #333;
/*            设置左右的内边距*/
            font-size: 20px;
/*            关于让每个元素之间有空隙，可以采用外边距和内边距，但是设置外边距会产生空隙，则采用内边距*/
            padding: 0 36px;
			}
		ul a:hover{
			color: white;
            background-color: black;
		}
	</style>
</head>
<body>
<!--不是这种结构 -->
	<ul>
		<li><a herf=""></li>
		<li><a herf=""></li>
	</ul>
<!--是这种结构 -->
	<nav>
		<a herf="">
		<a herf="">
		<a herf="">
	</nav>
</body>

图示：
P6浮动案例2

高度塌陷

高度塌陷 ：块元素的高度默认情况下是被子元素撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流子元素将无法撑起父元素高度，将会导致父元素高度丢失，父元素一旦丢失，页面的其他元素位置也会移动，导致布局的混乱。

高度塌陷解决方式

开启父元素BFC，overflow：hidden
使用clearfix

<style>
.clearfix::after{
	content:'';
	display:block;
	clear:both;
}
</style>

BFC（Block Format Content）

概述
是块级格式化环境。
是元素的隐藏属性，一旦元素开了BFC它将会开启一个独立的布局区域。

BFC独立布局区域的特性

开启了BFC的元素，它的子元素的垂直外边距不会传递给父元素；
开启了BFC的元素，不会被浮动的元素所覆盖；
开启了BFC的元素，可以包含浮动的子元素；
BFC无法直接开启，需要通过一些属性来开启BFC；

开启BFC的方式

设置元素浮动可以开启BFC。float:left/right/;
对于后面的块元素会影响布局（由于设置浮动的元素脱离文档流，不在文档流中占据位置，后面的块会自动上移）、且会丢失元素的宽
将元素设置为行内块元素。display:line-block;
对于后面的块元素不会影响布局，但是还是会丢失元素的宽
可以将元素的overflow设置为一个非visible的值(默认值是visible)；overflow:hidden/auto/scroll;

可以采用overflow:hidden 来开启元素的BFC，从而解决高度塌陷的问题。

clear属性

clear用来清除浮动元素对当前元素的影响
本质是：原理是浏览器自动给设置clear的元素设置了外边距
可选值

具体值	说明
none	默认值，不清除
left	清除左侧浮动元素对当前元素的影响
right	清除右侧浮动元素对当前元素的影响
both	清除两侧元素对浮动元素影响最大的那一侧

浏览器会给设置clear属性的元素设置一个外边距

高度塌陷+外边距重叠+clear

<head>
	<style>
/*        既可以解决外边距重叠、又可以解决高度塌陷的问题。*/
/* 父元素的类名.clearfix  */
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
            }
      </style>
  </head>