- 博客(6)
- 收藏
- 关注
RSS订阅原创 CSS一些常见小问题
CSS浮动高度塌陷问题解决问题产生原因当父元素没有设置高度，而子元素全部设置了浮动，此时子元素全部脱落父元素浮动，无法撑起父元素的高度，此时父元素高度就会塌陷。解决方案方案1父元素设置固定高度方案2父元素设置属性overflow: hidden;方案3在所有浮动子元素下方加入一个空div，并给div设置属性clear: both;...
2021-07-23 15:42:28
107
原创 Flex布局练习案例-六点骰子
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
2021-05-27 13:01:50
323
原创 Flex布局及相关属性介绍（下）
Flex布局及相关属性介绍（下）Flex的相关属性项目属性3.flex-shrink:如果项目在主轴上装不下，设置项目的缩小因子（基本上不用）4.flex-basis：设置项目在主轴的占据大小（一个盒子，可以通过width来设置盒子在主轴上占据的大小，也可以通过flex-basis来设置盒子的大小，如果同时设置，则是flex-basis起作用）属性值： 和width一样，可设置大小，优先级比width高5.align-self：设置某个项目在交叉轴上的位置属性值： flex-end：在
2021-05-26 10:39:47
180
原创 Flex布局及相关属性介绍
Flex布局及相关属性介绍常见的布局PC端： 流式布局 浮动布局 层布局移动端： flex布局flex布局介绍flex布局是CSS3中提出的一种布局方案，在开发移动端页面时，使用的基本都是flex布局。如不考虑浏览器的兼容问题，在PC端也可使用Flex布局，但许多PC端浏览器对CSS3支持的并不友好。使用flex布局，就不要再考虑浮动布局。flex布局中的几个概念1.容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。2.项目：容器中的直接子元
2021-05-17 15:14:28
177
原创 CSS常用单位介绍及大小适配问题
CSS常用单位介绍及大小适配问题pxpx指像素，在CSS中指的是逻辑像素，而非屏幕设备的物理像素。而在进行适配时，使用px作为单位并不合适em指的是相对长度单位，它的1em即一个汉字的宽度，所以em的具体宽度和我们在css中设置的字体大小即font-size有关。如：font-size:20px; 1em = 20px; 10em = 200px; 注意：决定em长度的font-size是相对于其元素的父元素而言，因此em也不适合用来适配。 rem指的是根相对长度单位，和em一样，
2021-05-17 14:45:04
161
原创 像素和视口在PC端和手机端的相关区别和联系
关于手机端与PC端像素以及视口的相关问题像素 像素分为物理像素和逻辑像素 物理像素： 即手机或电脑等显示设备屏幕的发光点，一个发光点对应一个物理像素 例如：电脑屏幕的分辨率为1920*1080，即此屏幕上有1920（水平）*1080（竖直）个物理发光点。 在前端的开发中，一般不关注物理像素。 逻辑像素： 即在编写CSS代码时，调整长度和宽度时所用到的px，又称为CSS像素视口视口是与设备相关的一个矩形区域（一个盒子），以“像素”作为单位。视口是一个虚拟容器，前端的页面就装入
2021-05-04 22:04:23
697
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人