PINK老师HTML5+CSS3教程5

最新推荐文章于 2024-11-14 09:54:48 发布

incandescent__dr

最新推荐文章于 2024-11-14 09:54:48 发布

阅读量181

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/incandescent__dr/article/details/124910211

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

PINK老师HTML5+CSS3教程5

前言
一、CSS三大特性
二、盒子模型
总结

前言

提示：这里可以添加本文要记录的大概内容：
https://www.bilibili.com/video/BV14J4114768?p=129&spm_id_from=pageDriver

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS三大特性

层叠性继承性优先级
层叠性：相同选择器相同样式样式冲突的话遵循就近原则哪一段代码离的近就执行谁样式不冲突的话不会层叠
继承性：子标签会继承父标签中某些样式text- font- line- color 简化代码减低复杂性
行高的继承

<style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 没有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>

优先级：选择器相同根据层叠性选择器不同根据选择器权重执行
在这里插入图片描述
权重最高的

 div {
            color: pink!important;
        }

优先级四组数字组成，永远不会有进位，等级从左到右判断，某一位相同则判断下一位
继承的权重是0 该元素没有直接选中仍然是0
链接固定有样式，要专门修改

计算权重复合选择器有权重叠加的问题

<style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>

二、盒子模型

四个组成部分、利用边框复合写法给元素添加边框、计算盒子实际大小、利用盒子模型布局模块、盒子设置圆角边框、盒子添加阴影、文字添加阴影

1.三大布局

盒子模型、浮动、定位
相关网页元素都是盒子BOX
边框外边距内边距实际内容
border 边框
contain 内容
padding 内边距
margin 外边距
在这里插入图片描述

1.边框

粗细样式颜色
border: border-width||border-style||border-color
border-style:solid（实线的）dashed（虚线的）dotted（点线的）
复合写法 border: 5px solid pink; 没有顺序
代码如下（示例）：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框的复合写法</title>
    <style>
     div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */
            /* 边框的复合写法 简写:  */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>
<body>
    <div></div>
</body>

合并相邻的边框
border-collapse: collapse;
边框会影响盒子的实际大小
所以要么测量时不测边框要么测量时包含边框 weight/height减去边框宽度

2.内边距

padding 内容至边框的距离
top left right bottom

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;

        }
    </style>

复合写法
在这里插入图片描述
padding会影响盒子实际大小
如果盒子已经有了宽度和高度，再指定内边框会撑大盒子
用weight/height减去内边距大小
如果盒子没有指定weight/height，则padding不会撑开盒子大小

eg:遇到字数不一致的情况，一般给padding 撑开

3.外边距

margin 控制盒子和盒子之间的距离
margin简写方式和padding一致
外边距可以让块级盒子水平居中（盒子必须指定了宽度，左右外边距设置为auto
可以写做：
margin-left:auto ;margin-right:auto;
margin:auto;
margin:0 auto;
对块级元素有效
若为行内元素或行内块元素水平居中，则为其父元素添加text-align:center

外边距合并：嵌套块元素外边距塌陷
若父元素有上外边距给子元素添加上外边距，则父元素会塌陷较大的上外边距
解决方法：
1、为父亲添加上边框
2、为父亲添加上内边距
3、为父亲添加overflow:hidden

    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>

使用浮动定位就不会有这种问题

2.清除内外边距

很多网页元素都带有默认的内外边距，不同浏览器中默认值不一致，布局前要清楚内外边距
代码如下（示例）：

* {
           margin: 0;
           padding: 0;
       }

这句也是CSS第一行代码。
行内元素一般只设置左右内外边距

总结

CSS三大特性
CSS注释
PS切图
CRTL+R 打开标尺选择像素

incandescent__dr

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫