html+css
小黄风云
这个作者很懒,什么都没留下…
展开
-
布局:简解PC端管理后台页面
注:BFC规范解决覆盖问题 https://www.bilibili.com/video/av68866999/?p=166原创 2019-11-19 20:21:23 · 820 阅读 · 0 评论 -
标签分类
标签按类型划分:block:div、p、ul、li、h1~h6等等inline:span、a、em、strong、img等等inline-block:input、select等等block标签特性:1、独占一行2、支持css的所有样式(背景色、margin、padding、宽高等等)3、不写宽的时候,跟父元素的宽相同4、所占区域是一个矩形...原创 2019-10-25 14:55:24 · 603 阅读 · 0 评论 -
CSS定位
position:static(默认)relativeabsolutefixedsticky(黏性)relative:1、如果没有定位偏移量,对元素本身没有任何影响2、不使元素脱离文档流★3、不影响其它元素布局★4、left、top、right、bottom是相对于当前元素自身进行偏移的absolute:1、使元素完全脱离文档流★2、使内联元素支持宽高(让内联具备块特...原创 2019-10-27 15:27:34 · 157 阅读 · 0 评论 -
盒模型:关于margin的左右自适应与上下自适应
首先写一个盒子:加入margin-left: auto;左外边距自动(自适应)效果:改为margin-right: auto;右外边距自动(自适应)效果:改为左右外边距都自动的(左右自适应)水平居中效果:那我上下是不是也可以自适应来达到垂直居中的效果呢?结果是不可以的:结论:margin左右自适应是可以的,但上下自适应是不行的。原因:浏览器在进行CSS渲染的时候,跟其它的样式...原创 2019-10-25 12:46:23 · 3343 阅读 · 1 评论 -
盒模型:width、height不设置时,对盒模型的影响
先写一个嵌套的盒子,在不设置width100%的情况下盒子2的宽度也会占满整个容器此时我们给盒子2加一个30px左内填充,会发现盒子2超出了30px:再加一个10px左边框,发现再次超出了10px:此时你可能会想到将盒子2的box-sizing设为border-box,此时宽度值300px将包含边框、内填充和内容(content),而不仅仅是把content设为300px:其实不...原创 2019-10-25 13:48:09 · 926 阅读 · 1 评论 -
常见问题:img图片与容器底部有一些间隙
看这个现象,底部有间隙:然后我们加一些字看看:img标签的vertical-align属性就是对齐方式,默认值是baseline也就是按照文字的基线对齐,所以会产生空隙我们将其改为bottom,按照文字的底线对齐,空隙就没有了:以上是推荐解决方案,还有一种就是将img转换成块元素,不是内联元素也就不会有缝隙了:...原创 2019-10-25 18:59:40 · 537 阅读 · 0 评论