- 博客(12)
- 收藏
- 关注
RSS订阅原创 学习CSS之现代布局手段——Flex弹性盒子模型
能灵活处理容器内子元素的布局，尤其是在容器尺寸和子元素数量和尺寸都不确定的情况下(比如电商网站增加新的商品展示)，但是只有IE11以上浏览器用户才支持。Flexbox 是 CSS3引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。采用 Flex 布局的元素称为Flex 容器，其内部的子元素称为Flex项目。flex-direction属性的四种取值，决定了主轴的方向和项目的排列方式。align-items属性的五种取值，控制项目在交叉轴上的对齐方式。定义，交叉轴垂直于主轴。
2025-06-02 14:15:12
243
原创 学习CSS之清除浮动
如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。设置浮动后，父盒没有设置高度，其高度由子盒撑开，若子盒全部浮走，则高度为0。设置clear:left只会撑开左浮动的盒子，右浮动的盒子不能撑开。设置clear:left只会撑开右浮动的盒子，左浮动的盒子不能撑开。可以设置宽高属性，独占一行，例如：h1，p。
2025-05-28 13:35:33
471
原创 学习CSS之盒子的浮动
1、当子元素设置浮动后脱离文档流，父元素无法感知子元素的高度，导致自身高度计算为0。若子元素高度动态增加(如用户输入、异步加载数据等)，父元素的固定高度无法自动扩展，会出现内容溢出或遮挡现象。第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。第一个设置右浮动的盒子浮至浮层，其它设置右浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。2、父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，盒子浮动起来后，会生成一个与父盒等宽的浮层。
2025-05-25 00:00:00
790
原创 学习CSS之盒子模型
盒子模型（Box Model）是CSS中用于描述元素布局的核心概念。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容（content）内边距（padding）边框（border）和外边距（margin）。
2025-05-19 22:53:01
384
原创 学习CSS之伪元素选择器and伪类选择器
虚拟元素平时是不显现的，但可以在CSS代码中通过伪元素选择器设置虚拟元素的样式。2 有些浏览器对伪类的支持不太好，比如部分火狐浏览器无法支持:active属性。，可以在CSS代码中通过伪类选择器对这个虚拟的类属性进行设置。在同一层级的所有元素中，HTML默认在所有元素的。，以创建具有丰富交互效果的链接和按钮。虚拟的类属性（用于动态属性配置），否则会影响浏览器的渲染。按钮标签<button>:visited 链接。:active 链接。这四个伪类从前到后的。
2025-05-05 17:02:40
627
原创 学习CSS之常用样式
图片宽度设置除了直接写死像素大小，还可以设置其相对于容器的比例。若存在固定高度的容器，图片高度页可以设置其相对于容器的比例。
2025-04-25 14:06:56
405
原创 学习CSS之复合选择器
由两个选择符直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个选择符必须是标签选择符，第二个选择符必须是class类选择符或id选择符。各个基本选择符所覆盖的内容范围。任何形式的基本选择符都可以作为“并集”选择符的一部分。选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择。选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>隔开。选择紧跟E元素后的F元素，用+隔开，选择相邻的第一个兄弟元素，选择所有被E元素包含的F元素，中间用空格隔开。：多个基本选择器之间。
2025-04-17 14:35:42
607
原创 学习CSS基础之样式引用
1、CSS（Cascading Style Sheets）层叠样式表，用于定义HTML中元素样式，目的是让网页变得美观。important声明)和特异性也会影响CSS样式的处理层级，特异性值由选择器中的不同类型决定。，但不同浏览器之间的显示效果仍有一点差异（以后实际开发项目，我们其实很少自己手写CSS样式，而是直接。是指当在HTML文档中引用多个CSS样式文件时，若多个样式文件所定义的样式之间发生冲突，将依据。：行内样式 > id选择器的样式 > 类选择器的样式 > 标签选择器的样式。
2025-04-11 05:00:00
409
原创 学习html中的块级元素与行内元素 and 网页的语义结构设计
不管前方的路有多辛苦，只要走的方向正确，都比站在原地更接近幸福。一：块级元素与行内元素1 什么是块级元素？块级元素会在页面中独占一行（自上向下垂直排列），可以设置width、height属性，一般块级元素可以包含行内元素和其他块级元素2 常见块级元素div、form、h1~h6、hr、p、table、ul、li等无实际渲染效果的块级元素标签<div>3 什么是行内（内联）元素？行内元素不会独占页面中一行，只占自身的大小，行内元素设置width、height属性无效。
2025-04-07 18:00:00
285
原创 学习html中的表单标签＜form＞
input>元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。2基本语法当浏览者选择的项目较多时，如果使用选择钮来选择，会占据页面的较大空间，这时可以用<select>标签和<option>标签来设置选择栏。选择栏可分为弹出式和字段式两种。
2025-03-30 03:30:00
882
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人