html css
_阿锋丶
这个作者很懒,什么都没留下…
展开
-
理解BFC,以及学会BFC的三大应用
什么是BFCBFC的目的就是形成一个完全独立的空间,让空间中的子元素不会影响外面的元素。如何形成BFC(触发规则)为元素设置一些css属性float 不为 boeposition 不为 relative 和staticoverflow 为 autodisplay 的值为table-cell 或 inline - blockBFC的应用解决浮动元素令元素高度塌陷的问题假设一个页面有四个子元素,他们的高度本来是撑开父元素的高度的。当他们都设置为浮动时,会呈现高度塌陷问题如下:原因原创 2020-10-15 10:38:50 · 173 阅读 · 0 评论 -
快速理解css响应式
文章目录rem,em是什么响应式布局的常用方案响应式 vm/vhrem的弊端什么是网页视口尺寸vw/vhrem,em是什么rem就是响应式的重要单位响应式布局的常用方案下面代码就是对字体实现了响应式,在屏幕宽度<374px的情形下,根元素的字体大小是86px,在>375和<413px的情形下根元素的字体是86px,在大于414px情形下更元素字体大小为110px,所以div中的字体分别为0.1686 0.16100 0.16*110<!DOCTYPE html&原创 2020-07-10 08:52:16 · 225 阅读 · 0 评论 -
css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
文章目录三种水平居中方式及其应用情形inline元素:text-alignblock元素:margin:0 autoabsolute定位过的元素:left:50%;margin-left:负值(元素宽度的一半)四种水平垂直居中方式和应用场景inline元素:设置line-height等于height的值absolute定位过的元素:top:50%;margin-top:负值(元素宽度的一半)absolute定位过的元素:设置transform:translate(-50%,-50%)absolute定位过的原创 2020-07-09 20:40:06 · 264 阅读 · 0 评论 -
nth-child和nth-of-type的区别
nth-child和nth-of-type的区别转载 2020-07-08 10:36:47 · 109 阅读 · 0 评论 -
圣杯布局和双飞翼布局的理解和对比
文章目录圣杯布局双飞翼布局圣杯布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</title></head><style t原创 2020-07-07 18:41:50 · 150 阅读 · 0 评论 -
你不知道的几个css面试细节问题?
文章目录什么是margin纵向重叠margin的几个属性设置负值会怎样怎样理解BFC什么是margin纵向重叠margin的几个属性设置负值会怎样margin-top和margin-left设置负值,元素向上向左移动如下图:测试原图如果针对item1设置原图中的item1发生改变向上移动20px如果针对item3元素设置item3就会被向左移动20px如下图margin-right设置负值,右侧元素左移,自身不受影响如果用以上原图针对item3设置item4就会向左移动2原创 2020-07-07 11:12:06 · 181 阅读 · 0 评论 -
什么是BFC?看这一篇就够了
什么是BFC?看这一篇就够了转载 2020-07-07 10:54:15 · 138 阅读 · 0 评论 -
H5的一些新增特性
文章目录新增的语义化标签新增的媒体元素video 视频auto 音频HTML5对表单元素的的扩展multipe新增的语义化标签这些标签是一些网页通用结构的简称,他们是块级元素,没有什么特别的特点,只是为了方便语义化编程新增的媒体元素video 视频 <style> video{ height: 500px; width: 800px; } </style></head&g原创 2020-06-04 17:31:58 · 291 阅读 · 0 评论 -
css细节:margin:auto为什么只能实现水平居中,不能实现垂直居中
css细节:margin:auto为什么只能实现水平居中,不能实现垂直居中转载 2020-06-02 21:46:49 · 930 阅读 · 0 评论 -
css的transform中的 translate scale rotate skew origin细节介绍
文章目录transform属性介绍translate 平移scale 缩放originrotate 旋转skew 倾斜transform属性介绍translate 平移给元素做简单的位移的时候一般用这个,不是布局只是位移如下一个值transform: tanslate(100px);两个值transform: tanslate(100px,0);上面代码的意思是x轴方向移动100px,x轴方向移动就是向右移动100pxtransform: tanslate(50%);这句代原创 2020-06-02 10:34:42 · 240 阅读 · 0 评论 -
清除浮动的几种方式
清楚浮动转载 2020-06-02 09:42:47 · 161 阅读 · 0 评论 -
轻松认识浮动的六大规则的细节处理
文章目录浮动规则一三种元素的层叠关系浮动规则二浮动规则三前三浮动规则的几种情形情形一情形二情形三情形四情形五浮动规则一规则一的是浮动的基本的规则,脱离标准流是一个重要的注意点。三种元素的层叠关系上面的3个盒子描叙的是三种元素的层叠关系,其中标准元素是不存在层叠的,它在最下面,定位元素会层叠到标准元素的上面,定位元素之间可以z-index,前提是必须是定位元素,不能是static元素,浮动元素的层叠在标准元素之后,层叠关系具体如下:标准元素->浮动元素->定位元素浮动规则二具体情原创 2020-05-31 08:07:41 · 374 阅读 · 0 评论 -
深入理解CSS中的行高与基线
深入理解CSS中的行高与基线转载 2020-05-30 13:05:44 · 186 阅读 · 0 评论 -
flex布局的从认识到深刻认知到熟悉使用(详细图解)
文章目录flex布局的初步认知兼容性怎么开启一个flex布局flex的布局模型两个坐标系main axis和cross axis的一些重要念flex的container中的属性flex-directionJustigy-contentalign-itemsflex-wrapflex-flowalign-contentflex-item中的属性orderalign-selfflex-growflex-shrinkfelx-basisflexflex布局的初步认知兼容性flex布局的兼容性是杠杠的,几乎原创 2020-05-28 13:01:10 · 2142 阅读 · 0 评论 -
css脱离标准流(normal flow)元素的特点细节复习
文章目录那些元素会脱离标准流脱离后的特点1,可以随意设置宽高2,如果不设置宽高的话,它的宽高由内容决定3,不在受标准流的约束4,不再给父元素汇报宽高5,和display有什么关系那些元素会脱离标准流浮动绝对定位固定定位脱离后的特点1,可以随意设置宽高无论是行内原水还是块级元素或者是inline-block元素都可以设置宽高2,如果不设置宽高的话,它的宽高由内容决定这里块级元素没有脱离之前的宽是横跨整个浏览器的,但是脱离之后由内容决定宽高3,不在受标准流的约束这些脱离之后的元素不在搜原创 2020-05-27 10:40:58 · 966 阅读 · 0 评论 -
css所有知识点全面复习
文章目录什么是 CSS?id 和 class 选择器id 选择器class 选择器如何插入样式表外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)多重样式多重样式优先级深入概念CSS 背景背景颜色背景图像背景图像 - 水平或垂直平铺背景图像- 设置定位与不平铺CSS 文本格式文本颜色文本的对齐方式文本修饰文本转换文本缩进CSS 字体CSS字型字体样式字体大小用em来设置字体大小CSS 链接CSS列表属性:列表作为列转载 2020-05-25 09:00:49 · 8661 阅读 · 1 评论 -
flex:1是什么含义及flex弹性布局详解
flex:1阮一峰flex教程转载 2020-04-21 11:03:43 · 4947 阅读 · 0 评论 -
css上的四个不同的视窗单位分别是
四个不同的视窗单位分别是:vw:如 10vw 的意思是视窗宽度的 10%。vh: 如 3vh 的意思是视窗高度的 3%。vmin: 如 70vmin 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。vmax: 如 100vmax 的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。...原创 2019-12-02 15:17:47 · 160 阅读 · 0 评论 -
css的块和内联元素
–> <div style="background-color:red;width:200px;">我是一个div </div>"<p style="color:red;">天气</p><span style="color:red;">我是span </span>...原创 2019-06-16 21:18:30 · 83 阅读 · 0 评论 -
css中常用的选择器
#p1{font-size:20px;}/* class选择器 // 类选择器-通过元素class属性中的一组元素-语法:.class属性值{}*/.p2{font-size:30px;}.hello{font-size:40px;}#p1,.p2{background-color: green;}/* 选择器分组通过选择器分组可以同时选中躲个...原创 2019-06-16 21:19:27 · 86 阅读 · 0 评论 -
css盒子模型详解
<!-- css的盒子模型 --><!-- 1,css在处理网页时,他认为每个元素都包含在一个不可见的盒子 里 2,如果把所有元素都想象为盒子,那么我们的网页布局就是 摆盒子。 3,盒子模型: -内容区 -内边距 -边框 -外边距 --> <!-- css的边框 --> <...原创 2019-08-18 16:57:43 · 120 阅读 · 0 评论 -
什么是css的浮动
<!-- 浮动 --><!-- 块元素在文档流中默认垂直排列 如果希望块元素在页面中水平排列 可以是其脱离文档流 使用float来使元素浮动,从而脱离文档流 可选值: none:默认值,认在文档流中排列 left:像左浮动 right:向右浮动 元素浮动以后,会尽量向页面的左上...原创 2019-08-18 16:58:47 · 395 阅读 · 0 评论 -
html和css导航条的创建
<!-- 浮动 --><!-- 块元素在文档流中默认垂直排列 如果希望块元素在页面中水平排列 可以是其脱离文档流 使用float来使元素浮动,从而脱离文档流 可选值: none:默认值,认在文档流中排列 left:像左浮动 right:向右浮动 元素浮动以后,会尽量向页面的左上...原创 2019-08-18 17:01:58 · 200 阅读 · 0 评论 -
html和css相对定位和绝对定位的详解
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> .box1{ width:200px; height:200px; background-color:greenyellow; } .box...原创 2019-08-18 17:04:21 · 123 阅读 · 0 评论 -
javascript图片切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-16 11:21:26 · 90 阅读 · 0 评论 -
javascript什么是DOM详解
JS什么是DOM 我是一个按钮原创 2019-08-16 11:24:58 · 311 阅读 · 0 评论 -
绝对定位会影响overflow的效果和导航栏的制作详解(复制代码观看效果)
overflow和绝对定位会使overflow的属性失效 绝对定位会使其脱离文档流的 绝对定位的元素不总是被父级 overflow属性裁剪,尤其当overflow在绝对定位元素及其包含块之间的时候 解决方法 1,overflow元素自身为包含块.* *2,overflow远古三的子元素为包含块 //...原创 2019-10-03 22:33:55 · 962 阅读 · 0 评论 -
没有offsetright,用offsetLeft解决网页右端弹出层的问题,
offsetleft右边写侧边栏转载 2019-10-10 20:32:02 · 1606 阅读 · 0 评论 -
css是什么
css是什么 2019.6.161,css样式表的含义:层叠样式表2,css样式表的作用:1)能够更灵活的控制html的外观2)css表能够提供跟多html元素不具备的的样式exp:皮肤:后面设置的把前面相同设置的应用覆盖3,css样式表的结构:选择器{声明} 选择器:选择接受样式的标签是谁而声明是声明样式是什么。e: p{background-color:red}将背景色...原创 2019-06-16 20:39:57 · 240 阅读 · 0 评论