CSS
文章平均质量分 59
CSS相关个人总结
无响应乱码元素
这个作者很懒,什么都没留下…
展开
-
CSS中的两种盒模型总结
CSS3中的盒模型有两种:标准盒子模型和IE盒子模型盒模型都是由四个部分组成的,分别是margin、border、padding和content标准盒模型与IE盒模型的区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的范围只包含了contentIE盒模型的width和height属性的范围包含了border、padding和content可以通过修改元素的box-sizing属性来改变元素的盒模型:box-sizing:content-原创 2022-05-01 00:31:54 · 306 阅读 · 0 评论 -
十分钟搞懂CSS属性border相交画三角形的原理及规律
其实很早就了解到可以利用border属性来画三角形,但是当时没认真思考原理和总结规律,写下这篇博客记录下我的想法。🤔两个结论分界线原则:假如把有宽度的border靠外的一边叫做外边,靠内的一边叫做内边,则各个外边的交点与相对应各个内边交点的连线就是各border之间的分界线内边的确定依赖于原div的各边外边的确定依赖于原div的各边以及border的宽度一刀切原则:某方向的border宽度如果为0,边框的样式会表现出一刀切的样子🫣举例论证<div></div>原创 2022-04-19 00:52:48 · 596 阅读 · 0 评论 -
十分钟狠狠地拿下CSS中的BFC
🤔 什么是BFC块格式化上下文(Block Formatting Context,BFC)是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。MDN文档里的原话确实不怎么像人话,能看懂就奇了怪了。简而言之,BFC就是一个独立的布局环境,可以认为是一个容器,在这个容器里面你随便放都不会影响到容器外的布局。而且一旦触发了BFC,那容器内部怎么布局也不受外面影响。BFC在三种布局方式(正常布局流,浮动,绝对定位)中属于正常布局流🫣 如何触发BF原创 2022-04-18 23:24:06 · 181 阅读 · 0 评论 -
2分钟带你搞懂CSS伪元素和伪类的区别
相信很多CSS新手对伪类和伪元素这两个一直分不太清,MDN文档说的太官方也读不明白,那么就让我带你用2分钟的事件分清伪类和伪元素!一.伪类1.定义:MDN中对伪类的定义 感兴趣的可以看看,不过不一定能看懂2.伪类种类:3.伪类小例子:伪类小例子二.伪元素1.定义:MDN中对伪元素的定义2.伪元素种类:3.伪元素小例子:伪元素小例子三.区别这里以伪类 :first-child 和伪元素 :first-letter 为例。p>i:first-child {color: red}原创 2022-01-11 20:51:35 · 186 阅读 · 0 评论 -
你不知道的margin:0 auto和margin:auto
最近复习html和css的内容,想起来一个之前没想明白的问题,为什么块级元素margin:0 auto可以实现水平居中,而margin:auto不能实现水平垂直双居中呢?margin:0 auto居中的原理#parent{ height: 200px; width: 200px; background: black; margin: 0 auto;}#child{ height: 100px; width: 100px; background: red; margin: 0 aut原创 2022-01-08 22:15:46 · 1039 阅读 · 2 评论 -
HTML元素居中的几种方式总结
🧐 文字的水平居中 <style> div{ width: 200px; height: 200px; background-color: greenyellow; color: white; /*行高等于盒子的高度,完成垂直居中*/ line-height: 200px; /*元素的水平居中*/原创 2022-04-29 17:15:16 · 2199 阅读 · 0 评论