css学习第九天

最新推荐文章于 2026-06-23 23:18:49 发布

原创最新推荐文章于 2026-06-23 23:18:49 发布 · 110 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #学习 #css3

本文介绍了CSS中的圆角边框实现，通过border-radius属性设置，以及如何创建圆形和圆角矩形。接着讨论了浮动流的作用，如何改变元素排列，并解释了浮动元素的特点。对于浮动带来的问题，文章提到了清除浮动的必要性及几种清除方法，包括额外标签法、overflow属性、伪元素等。最后提及了CSS中的阴影效果和图片格式的相关内容。

圆角边框

原理：圆与边框的交集形成的圆角效果
border-radius:length;数值越大，圆形越明显
常见写法：如果要做成一个圆形，可以把数值写成正方形盒子宽度的一半，或者百分之50 ；
如果要做圆角矩形，可以设置成高度的一半；
如果想要设置成不同的圆角，比如.radius {w200; h200; border-radius:20px 20px 30px 40px;}
也可以简写成左上角，右上角，右下角，左下角，还有border-top-left-radius:20px;是左上角

盒子阴影

在这里插入图片描述
注意：鼠标经过显示阴影可以写成div:hover{。。。。。}
盒子阴影不占用空间

文字阴影

text-shadow: h-shadow | v-shadow | blur | color;

在这里插入图片描述

css浮动

传统网页布局的三种方式：标准流（普通流，默认方式排列），浮动流，定位流
一个完整的网页是三者一起构成的
1.为什么需要浮动？
浮动可以改变元素标签的默认排列方式
网页布局第一准则：多个块级元素横向排列标准流，多个块级元素纵向排列浮动流
2.什么是浮动？
float属性创建浮动框，使其移动到一边，直到左边缘或右边缘碰到另一个浮动框的边缘或父元素边缘
float: none | left（移动到左边，挨个放）| right; 在这里插入图片描述

浮动特性

1.浮动的元素会脱离标准流
脱离标准流的控制，移动到指定位置 (俗称脱标)
浮动盒子不会保留原先的位置
#可以解释成浮动是有浮动属性盒子会飘起来，后面没有浮动属性的盒子补上前面飘起来盒子位置

2.浮动的元素会一行显示并且元素顶端对齐
浮动元素会紧紧贴在一起 (不会有空隙)，按上沿对齐
如果父元素宽度装不下这些盒子，多出的盒子会另起一行对齐
#可以解释成浮动的高度都是一样的，所以会并排显示

3.浮动元素会具有行内块元素特性
行内元素添加float属性可以设置宽高
块元素添加float属性可以在一行显示
添加浮动的行内元素和块元素，他的宽度根据内容宽度来确定

约束浮动元素策略

网页布局第一准则：先用标准流父元素排列上下位置，之后内部子元素浮动来排列左右位置
网页布局第二准则：先设置盒子大小，在设置盒子位置
注意：1.浮动只会压住后面的标准流，不会压住前面的，后面的标准流会到浮动盒子的上面
2.一个元素浮动了，其他的兄弟元素都应该浮动

清除浮动

清除浮动的原因
有些父级盒子不方便给高度(如比较高的盒子，或者盒子高度要随时改变)，但是又不能不给高度(下面的标准流盒子又会占用父级盒子的位置)
1.父级没有高度
2.子盒子浮动了
3.影响下面的布局了
清除浮动的本质
清除浮动的本质是清除浮动元素对父级元素的影响，父盒子有高度，则不需要清除浮动
清除浮动以后，父级元素会自动检测盒子的高度，不会影响下面的标准流元素

语法规范：

div {
clear: left | right | both;
/* 清除左浮动，清除右浮动，同时清除 */
}
在开发时几乎只用clear: both;

清除浮动的方法
1.额外标签法(隔墙法，但平时不常用) W3C推荐
2.父级添加overflow属性
3.父级添加after伪元素
4.给父级添加双伪元素

1.额外标签法
在父级盒子后面新建一个盒子(必须是块级元素)
在新建盒子里写上属性clear: both;
发现父元素能自动检测高度，不会影响后面的标准流元素
这种写法父盒子本身高度没有增加，而只是在浮动元素后增加一个盒子拦住下面标准流的元素

<style>
    .nav {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    .clear {
        clear: both;
    }
</style>
<body>
    <div>
        <div class="nav"></div>
        <div class="nav"></div>
    </div>
    <div class="clear"></div>
</body>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构性较差

2.给父级添加overflow
给父元素添加overflow属性
这种方法父元素的高度会变得和子元素一样高，但是一旦有超出父元素边界的部分就会被隐藏

<style>
    .box {
        overflow: hidden;
        /* 清除浮动 */
        width: 800px;
    }
    .nav {
        float: left;
        width: 400px;
    }
</style>
<body>
    <div class="box">
        <div class="nav"></div>
        <div class="nav"></div>
    </div>
</body>

优点：代码简洁
缺点：无法显示溢出的部分 (例如margin取负值)

3.after伪元素法
相当于额外标签法的升级版，也是加了一个盒子

.clearfix:after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* I6,I7专有 */
    *zoom: 1;
}

使用：在父元素上添加这个属性
例

…

4.双伪元素清除浮动 (最常使用)

.clearfix:before,.clearfix:after {
  content:"";
  display:table;
  /* 如果写display:block的话两个块元素就会分行显示，影响父盒子大小 */
  /* table是表格，转化成块级元素并同行显示 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;   //照顾低版本浏览器
}