HTML+CSS
文章平均质量分 72
学习笔记
SQCTM810
这个作者很懒,什么都没留下…
展开
-
盒子模型
盒子模型标准盒模型怪异盒模型(IE盒子模型)box-sizing属性标准盒模型width表示范围只有content怪异盒模型(IE盒子模型)width表示content+padding+border这三个部分的宽度box-sizing属性在CSS3中引入了box-sizing属性,允许以特定的方式定义匹配某个区域的特定元素,即该属性可以指定盒子模型种类共有三种值:content-box:表示标准的盒子模型border-box:表示的是IE盒子模型padding-box:让宽度原创 2021-03-17 21:58:58 · 109 阅读 · 0 评论 -
CSS清除浮动问题
CSS清除浮动浮动问题解决方法方法1方法2方法3方法4浮动问题给一个盒子使用CSS的flloat浮动属性,导致其父元素盒子高度坍塌,不能被撑开<div class="parent"> <div class="son"></div> <div class="son"></div></div> <style type="text/css"> .parent{ border: red solid原创 2021-03-13 15:18:42 · 83 阅读 · 0 评论 -
CSS图片宽高比自适应
CSS图片宽高比自适应<div class="box"> <div class="img-wrapper"> <img src="bear.jpg" class="image"> </div></div> <style type="text/css"> .box{ width: 330px; } .img-wrapper{ overflow: hidden; width: 100%;原创 2021-03-12 22:59:08 · 1081 阅读 · 0 评论 -
CSS实现绘制三角形
CSS实现绘制三角形原理实心三角形等腰非直角等腰直角有边框的三角形空心三角形原理三角形可以通过调整盒子的边框border属性的四个方向的宽度、线条样式以及颜色来实现将盒子的边框调到足够宽就会发现,盒模型的边框是4条像梯形一样的线<div class="test"></div><style type="text/css"> .test{ background-color: red; width: 100px; height: 100px; b原创 2021-03-12 21:58:07 · 208 阅读 · 0 评论 -
CSS flex弹性布局
CSS flex弹性布局设置弹性布局基本概念容器属性项目的属性设置弹性布局弹性布局用来为盒状模型提供最大的灵活性.box{ display: flex;}/*行内元素使用 Flex 布局*/.box{ display: inline-flex;}/*Webkit 内核的浏览器必须加上-webkit前缀*/.box{ display: -webkit-flex; /* Safari */ display: flex;}注意:设为 Flex 布局后,子元素的floa原创 2021-03-12 15:00:07 · 131 阅读 · 1 评论 -
CSS实现元素居中
CSS实现元素居中水平居中行内元素块级元素多块级元素垂直居中单行行内元素多行元素块级元素水平垂直居中固定宽高未知宽高flex布局 水平居中行内元素块级元素多块级元素 垂直居中单行行内元素多行元素块级元素固定宽高未知宽高 水平垂直居中固定宽高未知宽高flex布局 参考:https://www.cnblogs.com/ghq120/p/10939835.html...原创 2021-03-11 17:29:59 · 165 阅读 · 0 评论