HTML+CSS第三周学习总结

最新推荐文章于 2022-07-10 02:13:22 发布

又要头秃了

最新推荐文章于 2022-07-10 02:13:22 发布

阅读量89

点赞数

文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_69289422/article/details/124823149

版权

CSS层叠性

如果样式冲突，采取就近原则，离结构近的执行

CSS继承性

子元素的部分属性会继承父元素的部分属性

注：行高可以不跟单位

<style>
    body{
        font:12px/1.5;     //这里的1.5为行高，就可以不加单位
         }
    div{
       font-size:14px;     //上面body为父元素，行高就可以继承到子元素div里
       }                   //那么div里的内容的行高为文字大小*行高
</style>

<body>
     <div>
      内容
     </div>
</body>

CSS优先级

！important》行内样式style=“”》ID选择器》类选择器》元素选择器

在样式后面加！important会限制性执行这个样式

权重叠加

复合选择器的权重叠加

<style>
   ul li{
        color:red;       //因为ul和li权重叠加，所以最后内容为red
       }
    li{
       color:pink;
     }
</style>
<body>
    <ul>
        <li>
        内容
        </li>
    </ul>
</body>

CSS盒子模型

边框border

宽度 border-width

主要为数值

样式 border-style

solid：实线边框

none：无边框

dashed：虚线边框

dotted：点边框

颜色 border-color

表格的细线边框

border-collapse(相邻边框合并在一起)

盒子边框会影响盒子实际大小

例：如果一开始盒子大小设定的是width=200px，height=200px，后来给盒子设定一个边框，边框的宽度width=10px，那么盒子的大小会变为200+10*2

盒子的内容content

内边距padding

padding不会撑开盒子大小

外边距margin

margin-（同padding）

让盒子水平居中

1、盒子必须指定宽度

2、盒子左右外边距都设置为auto

又要头秃了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS第三周学习总结

CSS层叠性如果样式冲突，采取就近原则，离结构近的执行CSS继承性子元素的部分属性会继承父元素的部分属性注：行高可以不跟单位<style> body{ font:12px/1.5; //这里的1.5为行高，就可以不加单位 } div{ font-size:14px; //上面body为父元素，行高就可以继承到子元素div里 } //那么div里的
复制链接

扫一扫