HTML与CSS学习 day6

最新推荐文章于 2024-08-12 21:44:16 发布

只只m

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量52

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_42778611/article/details/114776407

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css三大特性
1.层叠性
就近原则哪个样式离结构近就执行哪个样式只会重叠冲突的样式

<style>
        div {
            color: blue;
            font-size: 30px;
        }
        
        div {
            color: rgb(18, 155, 77);
        }
    </style>
</head>

<body>
    <div>努力工作</div>
</body>

2.继承性
子元素可以继承父元素的样式(text- , font- , line- , color)

行高继承
行高可以跟单位也可以不跟单位
如果子元素没有设置行高默认继承父元素的行高1.5
此时子元素的行高是 当前文字大小*1.5

body行高1.5 这样写的最大好处是子元素可以根据文字大小自动调整行高

 body {
            color: rgb(27, 163, 61);
            font: 20px/1.5 bold;
        }

css优先级

继承得到的权重是0 不论父元素权重多高子元素得到的权重都是0
a元素默认样式为a {color: blue;}

 继承 和 * 通配符选择器         0
 元素选择器             1
 类选择器 伪类选择器    10
 ID选择器              10000
 `
 行内样式 Style=" "    1000
 !important           无穷大

盒子模型
四部分组成
border 边框
content 内容
padding 内边距
margin 外边距

1.边框 boredr
boredr-width 边框粗细单位：px
border-style 边款样式
border-color 边框颜色

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

dashed : 虚线边框
solid : 实线边框
dotted : 点线边框

边框的复合写法 border: 5px solid black;

相邻边框被合并 border-collapse: collapse

padding 简写

一个值代表上下左右都是5像素的内边距
两个值代表上下内边距是5像素，左右内边距是10像素
三个值代表上内边距是5像素左右内边距是10像素下内边距是20像素
四个值代表上内边距5像素右内边距10像素下内边距15像素左内边距20像素
按照顺时针的顺序

 padding: 5px;
 padding: 5px 10px;
 padding: 5px 10px 20px;
 padding: 5px 10px 15px 20px;

padding会影响盒子大小如果想让盒子跟效果图一样大小减掉相应的width和height即可
如果盒子本身没有指定width/heigth大小则padding不会撑开盒子大小

外边距 margin
语法与padding完全一致

外边距可以让块状盒子水平居中
常见的写法下面几种都可以。

margin-left:auto:
margin-right:auto;
margin:auto;
margin:0 auto:

行内元素或行内块元素水平居中 给其父亲元素添加 text-align:center;即可

解决嵌套元素塌陷

1.可以为父元素定义上边框

 border: 1px solid transparent;

2.可以为父元素定义上内边距

 padding: 1px;

3.可以为父元素添加 overflow: hidden;

清除内外边距

这也是css的第一行代码

 * {
            padding: 0;
            margin: 0;
        }

行内元素尽量只设置左右的内外边距

只只m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS学习 day6

css三大特性1.层叠性就近原则哪个样式离结构近就执行哪个样式只会重叠冲突的样式<style> div { color: blue; font-size: 30px; } div { color: rgb(18, 155, 77); } </style></head><body>.
复制链接

扫一扫