css
前端-小明
这个作者很懒,什么都没留下…
展开
-
实现自适应三栏布局方法总结
1.改变页面结构 将两边盒子左右浮动 中间盒子给margin左右值2.不改变页面结构 三个盒子都添加浮动 中间的盒子用calc指定宽度3.不改变页面结构 左边盒子添加浮动 右面盒子添加定位 中间盒子添加左右margin值4.改变页面结构 给左右盒子添加浮动 中间盒子用BFC一级标题...原创 2020-11-26 22:03:25 · 366 阅读 · 0 评论 -
实现块级元素水平垂直居中的方法总结
1.通过给子元素添加margin注意:此方法只能用于子元素为块级元素或者行内块元素······不能用于子元素为行内元素的情况 因为行内元素设置垂直方向的auto没有效果通过给父级元素设置padding注意:此方法只能用于子元素为块级元素或者行内块元素······不能用于子元素为行内元素的情况 因为行内元素无固定宽高3.text-align: center;于vertical-align: middle;配合使用给父元素添加text-align: center可以让其内的行内元素行内块元素原创 2020-11-23 20:50:52 · 800 阅读 · 1 评论 -
word-spacing不起作用的问题
如图所示 当给元素添加word-spacing: -5px;时并没有起作用但是使用letter-spacing可以查阅资料得知word-spacing==>单个字/字母间隔,letter-spacing==>字母/汉子间隔如图所示 当给词之间添加空格 使用 word-spacing可以减少空格左右两个词之间的距离 而原来之间没有间隙的汉字(词)无法实现层叠效果...原创 2020-11-21 08:55:13 · 2031 阅读 · 0 评论 -
margin: auto 在行内块元素以及行内元素中 失效的问题
今天在写页面的时候 一个大黑盒子包裹一个图片 当给子元素设置 margin auto 时不起任何作用源码为效果图为当把 margin: auto;换成 margin: 10px auto; 页面会起变化但是 水平方向无变化源码为:效果图为:查阅属性的值 maigin的auto 无法作用于行内元素和行内块元素 但是如果是数值可以起作用当让块级元素内的行内元素 或行内块元素 水平居中 推荐给块级元素 添加 text-align: center; 很方便 因为也可以让图片下面原创 2020-11-20 21:55:09 · 1548 阅读 · 0 评论 -
background-size失效的问题及其基本用法
background-size的用法总结CSS3 background-size 属性 指定背景图像的大小:有四种值的写法当背景图片出现太大或者太小的问题是可以使用cover属性自动铺满cover于contain的区别是 contain 当x 轴或者y轴自动适应以后 另一个轴将不再拉伸background-size与background-repeat background-position的区别background-repeat 是当图像没有完全铺满时 背景图片是否x y轴重复 不会拉伸图像原创 2020-11-19 08:12:41 · 7830 阅读 · 2 评论 -
inline-block元素间默认空白间隙问题
有时候为了布局需要,我们需要把一些块状元素的display属性设置为inline-block,让它们在一行排列,如下代码:<style> .parent{ width: 200px; height: 60px; border: 1px solid pink; } .parent div{ display: inline-block; box-sizing: border-box; width: 30原创 2020-09-10 13:00:11 · 289 阅读 · 0 评论