![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
onlyoneLIJINGYI
这个作者很懒,什么都没留下…
展开
-
CSS-- BFC
看图中共有 3 个 p 元素,每个 p 元素设置width100px,height 40px, magrin 20px,预期结果应该是 4个方向margin都为20px,每两个元素之间上下就应该是40px,但很明显 两个p元素上下之间的margin值为20,像是重叠了一样,与预期结果不同,这是什么原因导致的呢?答案是 BFC。下面学习总结一下 BFC。BFC 是什么BFC (block fo...原创 2020-03-20 20:51:48 · 252 阅读 · 0 评论 -
JavaScript -- offset、client、scroll 获取元素长度区别
以一个例子来区别这几个属性的计算方式:父元素为橘黄色区域,子元素为蓝色边框包裹的区域。父元素布局:子元素布局:(content设置width、height都为100px,因为右侧出现滚动条,所以浏览器布局显示content width 90.4为去掉滚动条的宽度。)offset 类offsetHeight 与 offsetWidthoffsetWidth :获取元素本身的...原创 2020-03-20 13:17:26 · 410 阅读 · 0 评论 -
CSS -- flex 布局语法总结与分析
Flex Box 弹性盒子使用弹性盒布局可以更有效的对一个容器中的子元素进行排列、分配空间。注意: 元素设为 Flex 布局以后,其子元素的 float、clear 和 vertical-align 属性将失效。使用 flex 布局的元素称为flex容器 ,其包含的所有子元素称为flex 项目,容器默认有两根轴,容器中的项目按照轴的方向进行排列:1、水平方向的 主轴(main axis)...原创 2020-03-18 23:01:45 · 315 阅读 · 0 评论 -
css盒模型详解
CSS3中设置盒模型:/* 标准模型,宽高等于content */box-sizing:content-box; /*IE模型,宽高等于content+padding+border*/box-sizing:border-box;在实际应用中对于盒模型理解不够透彻的话会出现问题。1 标准模型比如下面问题设置父元素宽度为640px;对顶部搜索栏进行设置,左侧logo和右侧登录按钮进行绝对...原创 2019-09-13 10:06:01 · 147 阅读 · 0 评论 -
css清除图片下方的空隙
如下图背景颜色设为灰色,轮播图片与下方元素直接有空隙显示出来一天灰色的背景线。解决方法将图片设置为display:block;可以解决问题;设置图片垂直对齐方向 vertical-align:bottom;父元素宽高固定设置overflow:hidden;将图片设置为浮动...原创 2019-09-13 15:48:37 · 735 阅读 · 0 评论 -
flex布局justify-content: space-between的排版问题
.div1{ display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 600px; background-color: #e92...原创 2019-09-17 20:10:40 · 7631 阅读 · 1 评论 -
修改a标签默认颜色,使其继承父元素的颜色
a标签不设置其样式的话会默认为蓝色和下划线,为了方便后续设置,可以使其继承父级元素,只设置包裹a标签的父元素的color值就可以修改a标签的颜色。a{ color: inherit;/*继承父级元素的颜色*/ text-decoration: none;}如下面例子,给li标签添加点击的active样式时设置字体颜色为红色,而a标签自身设置的有颜色就不会继承父元素设置的字体...原创 2019-09-27 12:18:07 · 2907 阅读 · 0 评论