- 博客(10)
- 收藏
- 关注
RSS订阅原创 响应式布局，媒体查询与rem布局
rem布局原理：假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x=屏幕宽度/100,如果将x作为单位，x前面的数值就代表屏幕宽度的百分比width:50x;就是屏幕宽度的50%.注：设置全局属性在没有设置媒介查询限定时可以呈现这种效果，也可以将媒介共同的部分提取出来，简化代码。rem单位：指的是html元素的font-size的倍数。子元素设置rem单位属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化。不同的视口加载不同的css文件(同一个html加载不同的css文件)
2025-03-13 10:23:05
330
原创 格式化上下文（FC)--BFC、IFC详解
IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响）IFC中的line box一般左右都紧贴整个IFC，但会因为float元素而扰乱。IFC中不可能有块级元素，当插入块级元素时(比如p中插入div)会产生匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。·水平居中：当一个块要在环境中水平居中，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
2025-03-13 10:20:55
1905
原创 CSS3过渡、变换与动画详解
此外，还可以单独定义这四个单一属性：transition-property(参与过度属性),transition-duration(过渡时间),transition-timing-function(缓存描述),transition-delay(延迟时间)移动:transform:translate(100px,100px),参数分别表示水平方向和垂直方向的移动距离，还 可以单独定义。linear(匀速),ease非匀速(两头慢中间快),贝塞尔曲线(cubic-bezier(0,0.33,1,-0.35);
2025-03-12 11:09:39
1176
原创 CSS3背景拓展详解
定点设置:radial-gradient(circle at 800px 400px,red,yellow,blue)特殊变量设置:radial-gradient(circle at left top,red,yellow,blue)ellipse椭圆 如:radial-gradient(ellipse,red,yellow,blue)circle圆形 如:radial-gradient(circle,red,yellow,blue)如：radial-gradient(red,yellow,blue)
2025-03-12 11:08:08
271
原创 CSS3盒模型拓展-超详细
清除默认内外边距：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置。CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。上设置为10px、右设置为20px、下设置为30px、左设置为40px。上设置为10px、左右设置为20px、下设置为30px。
2025-03-11 16:52:00
641
原创 CSS3选择器详解--超详细
p:nth-last-child(n) 匹配同级元素中属于父元素下的倒数第n个元素，n也是从倒数第一个开始。注：节点(Node)是JS部分内容，页面中的一切都可以看成是节点，包括元素节点，文本节点，属性节点等。n还可以是公式an+m,如(2n+1)表示奇数，(2n)表示偶数 a,m可以是任意大于0的数字，n还可以是公式an+m,如(2n+1)表示奇数，(2n)表示偶数 a,m可以是任意大于0的数字，：通配符选择器，标签选择器，id选择器，类选择器，交集选择器，并集选择器，层级选择器。
2025-03-11 16:50:15
660
原创 CSS布局全解:浮动布局，列表布局，双飞翼布局，弹性盒模型等
两个盒子，一个浮动，一个在文档流上中间的内容区域自适应（例：80%居中）此时当页面小于内容区域最小盒子宽度时，头部和尾部显示不全了，我们可以让页面的最小宽度不小于该宽度即可 min-width max-width min-height max-height。注意：布局的时候，每个盒子都要设置右边距，此时容器应该比原有的宽度多出一个边距来，我们可以通过修改margin来解决（在没有显性设置宽度的时候，我们可以通过margin修改容器宽度）所以，flex 容器的高度受到最高子元素的影响。项目默认沿主轴排列。
2025-03-10 10:52:37
2261
原创 CSS盒模型详解：内容盒，边框盒
四值法：margin： 10px 20px 30px 40px 设置盒子的上左下右分别为10px 20px 30px 40px。左右留白：网站左侧内边距是固定的，内容在右侧甩出的空白不一样，可以给定一个固定宽度，只设置左边内边距，右边空白区域自动剩余。设置盒子上的上外边距为10px，左右为20px，下外边距为30px；盒子模型的组成由margin（外边距）、border（边框），padding（内边距），content（内容）组成。单值法：margin： 10px 设置盒子的上下左右的外边距都为10px。
2025-03-10 10:46:11
471
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人