欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS快速入门基础知识(四)

程序员文章站 2022-04-23 07:52:00
...

盒模型

CSS快速入门基础知识(四)
content (width + height ) 、padding(内边距) 、 border(边框) 、 margin(外边距)
盒子模型的计算规则:
         元素的总宽度 (高度): content + padding + border

padding: 内边距 (补白) 元素内容与边界的距离

padding 的间距不能写入内容(文本和图片),背景图除外。
       语法:
一个值: 40px; 四个边都有值。
两个值 20px 30px ; 上下 左右
三个值 20px 30px 40px ; 上 左右 下
四个值 20px 30px 40px 50px ; 上 右 下 左
padding-left: 20px ; 单向边添加padding
         right    top    bottom
注意: 盒模型计算的规则 : padding 值会撑大元素原来的尺寸,如果要保持原来的尺寸,需要在原来的尺寸上减去padding 的值

margin: 外边距, 控制元素和元素之间的距离

语法 : 与padding相同
       margin: 0 auto; 上下 自动计算    容器水平居中。
margin 的 CSS bug :
1.具有层级结构 ,容器中的**第一个子元素(块级元素)**添加 marging-top 值时,CSS 会错误的解析给父元素。
解决方式:1 . 给父元素添加 padding-top (常用方式).2. 触发 BFC 例如: 给父元素或者子元素添加 浮动 。
2. 相邻的块级元素添加 margin-top 和margin-bottom 时, 会出现重叠现象。解决方式: 1. 写给相邻元素中的一个, margin-top 或者 margin-bottom (常用方式) 2. 触发 BFC (原理性)
3. margin支持负数。



文本溢出属性:

overflow: 容器是否溢出
auto; 如果内容被修剪 ,则浏览器会显示滚动条, 以便查看其他的内容。
scroll ; 内容会被修剪 ,但是浏览器会显示滚动条,以便查看其余的内容
visible; 默认值 ,内容不会被修剪 ,会出现在元素框外
hidden; 内容会被修剪 ,并且其余的内容时不可见
inherit; 规定应该从父元素继承 overflow 属性的值

        overflow-x : 水平		
        overflow-x:auto;     水平方向文本溢出会出现滚动条
        overflow-f  : 垂直

        white-space:    如何处理元素内的空白
                     nowrap ;  文本不换行 ,
                            
        text-overflow :    文本溢出时是否显示省略号
                        clip;  不显示省略号(...)  而是简单的裁剪
                        ellipsis; 当对象内文本溢出时,显示省略标记。

         实现当行文本溢出:
                          width   容器必须有尺寸大小
                          overflow:hidden 
                          white-space:nowrap
                          text-overflow:ellipsis

    	实现多行文本溢出时产生省略号:
                           display: -webkit-box;      将对象作为弹性伸缩盒子模型显示
                           -webkit-box-orient: vertical;      设置或检索伸缩盒对象的子元素的排列方式
                                                                            容器里面的内容从上往下显示
                           -webkit-line-clamp: 3;     用来限制在一个块元素显示的文本的行数。
                                                                 为了实现该效果,它需要组合其他的WebKit属性。
                           overflow: hidden;    多出的文本隐藏
**适用范围:** 
           因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;但文字未超出行的情况下也会出现省略号,可结合js优化该方法  
相关标签: CSS干货 css