CSS的学习(二)---------重点内容

本文深入探讨CSS布局中常见的问题及解决方案,包括外边距合并、盒子模型、元素居中、浮动布局、伪元素应用等,同时介绍了一系列实用的CSS属性,如border-radius、text-indent、box-sizing等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.加外边距的时候会和父元素的外边距合并,这时我们会得不到我们自己想要的效果,所以我们可以采用给父元素加内边距的形式达到这个目的。


2.盒子(块元素)的外边距是不会累加的


3.实现居中的几种方式:
(1)margin:0 auto;表示上外边距为0,左右居中。(这种适用于容器的居中)
(2)line-height:设置行高为容器的高度,那么字体(仅限于字体和行内元素)就会在容器中垂直居中
(3)text-align:center:设置内容水平居中的方式


4.body默认的内边距为8px是因为浏览器中的字体大小默认为16px所以,就相当于是0.5em


5.浮动起来的块元素,宽度为0,需要指定宽度


6.浮动起来的元素会随着,屏幕的变化而流动,这就是流动布局,但当我们指定一个div的宽之后,再把浮动的元素放进去是我们做网页的常用方式。


7.高度一般给子元素指定


8.当一个父元素中的块元素浮动起来的时候,父元素的高会变为0,宽为占满整行,为了解决这个问题,我们一般会使用伪元素的方式使父元素有高度
代码:
ul::after{
    content: "";
    clear: both;
    display: block;
}


9.常用属性:
    border:1px solid #ccc;
    border-radius:50%;设定圆角半径
    text-align:center:设置内容水平居中的方式
    text-decoraction:none:去除文本的装饰,比如下划线
    text-intent:2em:缩进两个字符
    box-sizing:border-box;将内容盒子模型变为边框盒子模型
    解释:设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px,而不只是单纯的把内容当成200px了。


10.设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!
盒子模型:
    (1)内容盒子
    (2)边框盒子
              box-sizing:
                       content-box(默认值)
                                 width = 内容宽
                       border-box
                                 width = 2border+2padding + 内容宽

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值