![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 64
Yuki大魔王
这个作者很懒,什么都没留下…
展开
-
CSS实现元素水平垂直居中
1.absolute定位+自适应边距 html <div class="father"> <div class="son"></div> </div> css .father{ position: relative; /* 设置父元素定位 */ width: 200px; height: 200px; border: 2px solid black; } .son{ wi原创 2021-09-16 17:12:32 · 115 阅读 · 0 评论 -
CSS实现垂直居中
1.用line-height实现 当需要居中的元素是有内容的行内元素或者文字时,只需要设置父容器line-height即可实现垂直居中。 html <div class="content"> <span>Diana</span> </div> CSS .content{ width: 100px; line-height: 500px; border: 2px solid black; } span原创 2021-09-16 09:10:23 · 181 阅读 · 0 评论 -
CSS实现元素水平居中
1.用margin: 0 auto实现 将父容器设置一个固定宽度width,给居中元素设置margin: 0 auto即可 html <div class="content"> <div class="div1"></div> </div> CSS .content{ width: 500px; height:100px; border: 2px solid black; } .div1{原创 2021-09-15 19:49:50 · 688 阅读 · 0 评论 -
使用css绘制三角形
将div绘制成三角形 在css中,div默认是矩形的,那么如何将一个div绘制成三角形呢? 实现原理 将div的width和height设置为0,将两对边的边框设置为相同长度且颜色透明,例如border-left:50px solid transparent; border-right:50px solid transparent,最后再将剩下一边的边框设置为有颜色的就可以了,例如border-bottom:100px solid aqua。 实现 .app{ width: 0;原创 2021-09-14 15:21:17 · 984 阅读 · 0 评论 -
CSS盒模型
CSS盒子模型仅仅是一个形象的比喻,每一个可见的HTML元素都是一个盒子,一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)以及content(内容)。 我们可以发现margin、padding和border都是CSS属性,它们三是用来控制盒子的边距边框,而content就是描述HTML元素的内容,通过width/height属性设置content的宽度和高度。 - 内容盒子(W3C盒子) 默认盒子模型 W3C盒子 使用box-si原创 2021-09-10 14:55:38 · 40 阅读 · 0 评论 -
CSS选择器
- 标签选择器 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{ 属性:值; } 注意点: 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/原创 2021-09-08 18:58:24 · 56 阅读 · 0 评论 -
CSS的引入方式
- 内联样式(行内样式) 缺点:样式与结构冗余 优点:优先级较高 内联样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示: <div style="color:red">设置文字的颜色为红色</div> 这里要注意:样式的内容写在元素的开始标签里,并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。多个css样式写在一起的效果如下面所示: <div style="color:red;font-s原创 2021-09-08 18:55:27 · 62 阅读 · 0 评论