![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html、css
css笔记
「已注销」
这个作者很懒,什么都没留下…
展开
-
css垂直居中
1.固定定位 通过固定的值来进行居中定位2.position+定位1 position:absolute;2 left:50%;3 top:50%;4 margin-left:元素宽的1/25 margin-top:元素高的1/23.flex布局display:flex;justify-content:center;align-items:center;flex的兼容性不太行。4.table-celldisplay: table-cell;vertica原创 2021-07-12 11:05:02 · 93 阅读 · 0 评论 -
块级元素和行内元素
块级元素: 1.display为block 2.会独占一行,导致换行 3.可以设置宽高 4.margin外边距设置都有效 5.padding内填充都有效 6.可以容纳行内元素和块级元素,也可以容纳内联元素和其他元素 7.两者可以通过display来互相转换 8.举例:div p h1-h6 table form ul ol dl 等等行内元素: 1.display为inline 2.会与其他元素排列在一行上 3.不可设置宽...原创 2021-07-12 11:03:46 · 106 阅读 · 0 评论 -
css元素隐藏
元素隐藏方法:1.display:none;2.opacity:0;3.visibility:hidden;4.position:absolute;left:无穷大方法1,2,3的区别:1.空间占据 display:none 隐藏后不会占据额外的空间,但是它会产生回流和重绘 opacity:0,visibility:hidden 隐藏后仍然会占据着空间,只会产生页面重绘2.子元素继承 display:none 不会被子元素继承,但是父元素已经消除了,子元原创 2021-07-12 11:02:56 · 135 阅读 · 0 评论 -
css盒子模型
有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):Margin(外边距)- 清除边框外的区域,外边距是透明的。Border(边框)- 围绕在内边距和内容外的边框。Padding(内边距)- 清除内容周围的区域,内边距是透明的。C...原创 2021-07-12 11:01:52 · 66 阅读 · 0 评论 -
html网页渲染的基础过程
渲染过程其实就是将URL对应的各种资源,通过浏览器渲染引擎的解析,输出可视化:HTML/CSS/Javascript ->浏览器渲染引擎->图像渲染模块:从图中可以看出,一个渲染引擎大致包括HTML解释器,CSS解释器,布局和JavaScript引擎。HTML解释器:解释HTML语言的解释器,本质是将HTML文件解释成DOM树(文档对象模型)CSS解释器:解释样式表的解释器,作用是将DOM中的各个元素对象加上样式信息,从而为计算最后结果的布局提供依据。布局:将DOM和CSS样.转载 2021-04-13 12:50:25 · 109 阅读 · 0 评论 -
css中display属性的值及作用
display 的属性值常用:none|inline|block|inline-block其他:list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit常用的有none、inline、block、inline-block。分别的意原创 2021-04-08 14:56:38 · 950 阅读 · 0 评论 -
css区分px,em,rem,%
1、css实现垂直水平居中实现元素的垂直水平居中分为两种类型,一是未知宽高元素的垂直水平居中,一是已知宽高的垂直水平居中。方法一:已知宽高+position父元素:.father{ position:relative}.son{ position:absolute; top:50%; left:50%; margin-top:1/2子元素高度; margin-left:1/2子元素高度}方法二:已知宽高+计算(不推荐)这个方法就是强行计算根据父元素的宽高和子元素的宽高转载 2021-04-07 21:53:58 · 163 阅读 · 0 评论