HTML5+CSS3 学习笔记 07

最新推荐文章于 2022-08-04 09:53:01 发布

A_bad_horse

最新推荐文章于 2022-08-04 09:53:01 发布

阅读量261

点赞数 1

分类专栏： HTML5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/A_bad_horse/article/details/105258721

版权

HTML5+CSS3 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425

视频记录 162-188

圆角矩形

如果是正方形，想要设置为一个圆，将参数改为高度或者宽度的一半即可，或者直接写为50%
如果是矩形，设置为高度的一半即可。

盒子阴影

<!DOCTYPE html>
<html>
<head>
<style>
   div {
       width: 100px;
       height: 100px;
       background-color: pink;
       margin: 100px auto;
   }
   /* 原先盒子没有阴影，当鼠标经过盒子时添加阴影效果。 */
   div:hover {
        box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

文字阴影

网页布局三种方式

第一种：标准流：元素按照规定好的默认方式排列

块级元素独占一行，从上往下排列。div,hr,p,h1-h6,ul,ol,dl,form,table
行内元素，从左到右排列，一行可放多个，遇到父元素边缘则自动换行。span,a,em等

第二种：浮动（改变标签默认排列方式）

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动特性

脱离标准普通流的控制（浮）移动到指定位置（动），俗称“脱标”
浮动的盒子不再保留原先的位置

多个盒子设置了浮动，则会按照属性值一行内显示并且顶端对齐排列。
浮动元素是相互贴靠在一起（不会有缝隙），如果父级宽度装不下这些盒子，则多出的盒子会另起一行。

不管元素是何特性，添加浮动之后都具有行内块元素的相似特性。

如果块级盒子没有设置宽度，默认宽度和父级宽度一样，但是添加浮动之后，它的大小根据内容来决定。
为了约束浮动元素的位置，网页一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局练习

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none; /*去除列表显示的点符号*/
    }
    .top {
        height: 50px;
        background: gray;
    }
    .banner {
        width: 980px;
        height: 50px;
        background-color: gray;
        margin: 10px auto;
    }
    .box {
        width: 980px;
        height: 300px;
        background-color: pink;
        margin: 0 auto; /*居中对齐*/
    }
    .box li {
        float: left;
        width: 237px;
        height: 300px;
        background-color: gray;
        margin-right: 10px;
    }
    .box .last {
        margin-right: 0; /*最右边去掉右边距*/
    }
    .footer {/*通栏盒子无需指定宽度*/
        height: 200px;
        background-color: gray;
        margin-top: 10px;
    }
</style>
</head>
<body>
    <!--.top+.banner+.box+.footer + tab-->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <!--ul>li*4{$} + tab-->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>
</html>

清除浮动

为什么需要清除浮动

父元素没有高度（JD商品详情递增，区域会递增）
子盒子浮动不占位置，父盒子高度就变为0，会影响下面的标准流盒子。
浮动元素不再占用原文档流的位置，会对后面的元素排版产生影响。

语法：

选择器 {clear: 属性值;}

清除浮动的方法

第一种：额外标签法（隔墙法），W3C推荐使用。
- 在浮动元素末尾添加一个空标签或其他标签<br/>
- 优点：通俗易懂，书写方便。
- 缺点：添加很多无意义的标签，结构化差。

<!DOCTYPE html>
<html>
<head>
<style>
    .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: black;
    }
    .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .footer {
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>
<div class="box">
    <div class="damao">da mao</div>
    <div class="ermao">er mao</div>
</div>
<div class="footer"></div>
</body>
</html>

父级添加overflow属性
- 属性值为：hidden, auto或者scroll。
- 缺点：无法显示溢出的部分。

   .box {
        overflow: hidden;/*清除浮动，还能防止外边距合并*/
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
    }

父级添加after伪元素（:after）

父级添加双伪元素

第三种：定位

A_bad_horse

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3 学习笔记 07

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425视频记录162-188圆角矩形如果是正方形，想要设置为一个圆，将参数改为高度或者宽度的一半即可，或者直接写为50% 如果是矩形，设置为高度的一半即可。盒子阴影<!DOC...
复制链接

扫一扫

专栏目录