CSS基础学习（三）

最新推荐文章于 2022-10-13 11:43:36 发布

Jenny_Ghost

最新推荐文章于 2022-10-13 11:43:36 发布

阅读量252

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/jenny_ghost/article/details/120615848

版权

一、Chrome调试工具

在网页中，如果自己设置的样式并不能体现出来，可以右击选择检查，在style中查看自己的选择器

以及选择器的样式。有可能是style中单词拼错、结构错误、样式被覆盖、忘记写“；”……

二、PxCook的使用

用途：通过PxCook的使用来测量出设计图的尺寸和颜色，能够直接从psd文件中获取数据

下图是通过PxCook来取得的颜色尺寸

PxCook测试样例

三、盒子模型

1.基本概念：

浏览器在渲染网页时会将网页中的元素看作一个个的矩形，所以形象的称之为盒子。盒子也就是页面中的标签。

2.盒子的组成：

盒子模型一般由：内容区域、内边距区域、边框区域、外边距区域四个部分构成

盒子组成图示

3.盒子属性的设置：

①内容的宽度和高度：

利用width和height默认设置的是内容区域的大小

属性为： width/height

取值一般为：数字+px

②边框的属性：

作用：可以设置边框粗细、样式、颜色效果

属性：边框粗细：border-width 取值：数字+px

边框样式：border-style solid（实线）、dashed（虚线）、dotted（点线）

边框颜色：border-color 颜色取值

边框属性的连写：border：10px solid green（属性间用空格隔开就可以

边框的单方向设置：border-top/right/bottom/left

③盒子实际大小的计算公式

如果需要设置一个300*00的盒子有10px的边框和20px的内边距时，border和padding会把盒子撑大，padding也会撑大，变成360*360。这是因为盒子的实际大小是由内容区域、内边距区域（padding）、边框区域（border）构成的。

解决方法：手动内减，在计算出多的大小后，在内容大小中减去就可以了

④内边距（padding）

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

从上面开始赋值，然后顺时针赋值，没有设置的和对边一致。

padding的单方向取值：padding-top/right/left/bottom

⑤盒子大小的自动内减

使用CSS3中的盒模型：

属性名：box-sizing

属性值：border-box

只需要在代码中加入：box-sizing：border-box，此时盒子的长宽就是盒子的实际大小

⑥外边距

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

margin单方向设置：margin-left/top/right/bottom

⑦清除默认内外边距

场景：浏览器会默认给部分标签设置margin和padding，所以要清除一开始给的默认值

例如：body标签的margin默认为8px，所以只要在body标签中写上 margin：0；就可以了

p标签默认有上下的margin

ul标签默认有上下的margin和padding-left

⑧外边距折叠现象

垂直布局的块级元素，上下的margin会合并，最终导致两者之间的margin为两者的最大值

解决方法：只设置其中一个块级元素的margin

⑨外边距塌陷现象

互相嵌套的的块级元素，子元素的margin-top会作用在父元素上导致父元素一起往下移动

解决方法：给发元素设置border-top或者padding-top来分隔夫子元素的margin-top。或者给父元素设置 overflow：hidden。也可以将其转换成行内块元素。

代码实践

盒子实践

源代码

<!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{
             /* 去除浏览器默认行高    */
            line-height: 1;

        }
        .box{
            /* 大盒子的样式 */
            width: 400px;
            height: 400px;
            background-color:#fcc702;
            border: 5px solid #0043af;
            padding: 20px 10px 0;
            box-sizing:border-box;
        }

        .box h2{
            /* 标题样式 */
            /* width: 40px;独占一行不限宽度 */
            height: 40px;
            /* background-color: #fff; */
            border-bottom: 2px solid #0043af;
            box-sizing: border-box;
            font-size: 30px;
            color: #0043af;
        }
        .box ul{
            /* 去除无序标签前的小圆点 */
            list-style: none;

        }

        .box ul li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            /* 让文字居中 */
            line-height: 50px;
            padding-left: 15px;
        }
        .box ul li a{
            text-decoration: none;
            font-size: 18px;
            color: #0043af;
        }

    </style>
</head>
<body>
    <div class="box">
        <h2>湾区早报</h2>
        <!-- 使用 ul>li*5>a加tab能快速建立 -->
        <ul>
            <li><a href="#">库里单节砍下58分20篮板15助攻</a></li>
            <li><a href="#">库里化身小普尔三节打卡下班</a></li>
            <li><a href="#">普洱泡开库里或成最佳第六人</a></li>
            <li><a href="#">勇士高层表示将交易库里扶正普尔</a></li>
            <li><a href="#">金州拉文隔扣奥尼尔</a></li>
        </ul>
    </div>
   
</body>
</html>

Jenny_Ghost

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习（三）

一、Chrome调试工具在网页中，如果自己设置的样式并不能体现出来，可以右击选择检查，在style中查看自己的选择器以及选择器的样式。有可能是style中单词拼错、结构错误、样式被覆盖、忘记写“；”……；...
复制链接

扫一扫