竹亦迟-CSDN博客

原创 CSS定位

1.标准流块级元素独占一行——垂直布局行内块元素/行内元素——一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页任何位置一般用于盒子之间的层叠情况。

2024-04-21 17:17:39 263

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。会在页面中添加额外的标签，会让页面的HTML结构变得复杂。目的：需要父元素有高度，从而不影响其他网页元素的布局。直接给父元素设置overflow:hidden;2.给添加的块级元素设置clear.both。项目中使用，直接给标签加类就可以清除浮动。1.在父元素内容的最后添加一个块级元素。原因：子元素浮动后脱标，不占位置。/*在网页中看不见伪元素*/用伪元素代替额外标签。

2024-04-06 13:53:10 155

原创 CSS浮动

浮动元素不能通过margin:0 auto或者text-align:center设置居中。浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动（浮动的标签顶对齐）标准流：文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则。浮动元素比标准流高半个级别，可以覆盖标准流的元素（内容不能覆盖）行内元素或行内块元素：从左往右，水平布局，空间不够自动折行。浮动元素会脱离标准流，在标准流中不占位置。块级元素：从上往下，垂直布局，独占一行。一行可以显示多个并且可以设置宽高。浮动元素有特殊的显示效果。

2024-03-31 17:02:16 233

原创 CSS伪元素

：after 在父元素内容的最后面添加一个伪元素。：：before 在父元素内容的最前面添加一个伪元素。伪元素：一般页面中的非主体内容可以用伪元素。伪元素默认是行内元素（宽高不生效）必须设置content属性才生效。伪元素：CSS模拟出的标签效果。元素：HTML设置的标签。

2024-03-31 16:22:17 141

原创 CSS浮动-结构伪类

E：nth-last-child(n) 匹配父元素中倒数第n个元素。E：last-child() 匹配父元素中最后一个子元素。E：first-child(）匹配父元素中第一个子元素。优势：减少对于HTML中类的依赖，有利于保持代码简洁。E：nth-chikd() 匹配父元素中第n个元素。注意：n为0，1，2，3，4，5，6......作用：根据元素在HTML中的结构关系查找元素。场景：常用于查找某父级选择器中的子元素。奇数 2n+1,2n-1,odd。找到前五个 -n+5。

2024-03-29 22:58:16 202

原创 CSS盒子模型-内外边距问题

互相嵌套的块级元素，子元素的margin-top会作用在父级元素上。如果想通过margin或者padding改变行内标签垂直位置，垂直布局的块级元素，上下margin会合并。结果：取两个margin中最大值。结果：导致父元素一起往下移动。

2024-03-29 22:40:04 202 1

原创 CSS盒子模型-内边距

可以当作复合属性使用，表示单独给各方向设置内边距（最多取四个值）padding：10px 20px 30px (上左右下）2.设置属性box-sizing:border-box就可以。padding: 10px 20px(上下左右）padding:数字+px（四个方向都添加内边距）border+padding都会撑大盒子。

2024-03-27 20:57:08 142 1

原创 CSS盒子模型-边框

如：border：10px solid red;属性值：单个取值的连写，取值之间以空格分开。场景：只给这个盒子设置某个方向单独边框。属性名：border+方位名词。属性名:border。快捷键：bd+tab。

2024-03-26 17:27:09 227

原创 CSS盒子模型

1.盒子的概念1．页面中的每一个标签，都可看做是一个"盒子"，通过盒子的视角更方便的进行布局2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩区域，我们也形象的称之为盒子2.盒子模型CSS 中规定每个盒子分别由：内容区域（ content )、内边距区域（ padding )、边框区（ border )、外边距区域（ margin ）构成，这就是盒子模型3.记忆：可以联想现实中的包装盒代码展示效果展示。

2024-03-25 20:43:19 166 1

原创 CSS特性

2.给同一个标签设置相同的样式--此时标签会层叠覆盖--最终写在最后的样式会生效。1.给同一个标签设置不同的样式--此时样式会层叠叠加--会共同作用在标签上。如：a标签的color会继承失效，h系列的font-size会继承失效。1.如果元素有浏览器默认样式，此时继承性依然存在，但不会生效。当样式冲突，只有当选择器优先级相同时，才能通过层叠性判断。特性：子元素有默认继承父元素样式的特点（子承父业）可以通过调试工具判断样式是否可以继承。可以继承的常见属性：（

2024-03-23 18:17:37 207 1

原创 CSS元素显示模式及标签嵌套

div,p,h标签，ul,li,dl,dt,dd,form,header,nav,footer.......属性：dispay:inline-block 效果：转换为行内块元素使用频率：较多。属性：display:inline 效果：转换为行内元素使用频率：较少。属性：display:block 效果：转换为块级元素使用频率：较多。2.块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等。2.宽度和高度默认由内容铺开（设置宽高不生效）

2024-03-21 18:00:43 320 1

原创 CSS背景连写

特殊情况：在 pc 端，如果盒子大小和背景图片大小一样，此时可以直接写 background : url ()注意点。推荐： background : color image repeat position。属性名： background ( bg )单个属性值的合写，取值之间以空格隔开。①要么把单独的样式写在连写的下面。②要么把单独的样式写在连写的里面。背景相关属性的连写形式。

2024-03-20 15:25:47 228 1

原创 CSS背景

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。背景颜色默认值是透明： rgba (0,0,0,0)、 transparent。属性值：background - image : url ('图片的路径');属性名： background - repeat ( bgr )属性名： background - color ( bgc )属性名： background - image ( bgi )背景图片默认是在水平和垂直方向平铺的。沿着垂直方向（ y 轴）平铺。

2024-03-18 21:51:16 350

原创 CSS选择器进阶

2.并集选择器中的每组选择器可以是基础选择器或者复合选择器3．并集选择器中的每组选择器通常一行写一个，提高代码的可读性。（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式。2.交集选择器中如果有标签选择器，标签选择器必须写在最前面。2.后代选择器中，选择器与选择器之前通过空格隔开。选择器语法：选择器1，选择器2{ css }选择器语法：选择器1选择器2{ css }选择器语法：选择器1选择器2{ css }

2024-03-17 22:41:20 355 1

原创 css水平居中

2.margin:0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。1.如果需要让 div 、 p 、 h （大盒子）水平居中，直接给当前元素本身设置即可。用margin:0 auto;让div,p,h水平居中。

2024-03-15 14:52:47 390 1

原创 CSS字体和文本样式

字体系列： sans - serif 、 serif 、 monospace 等。具体字体：" Microsoft YaHei "、微软雅黑、黑体、宋体、楷体等．.如果给一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。1．从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体。如果要让文本居中对齐，text-align需要给文本标签父标签设置。2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体。常见取值：具体字体1，具体字体2，具体字体3，具体字体4,…

2024-03-14 22:12:35 1467 1

原创 CSS引入

写在style标签中，style标签写在head标签里，title标签下。：css写在一个单独的.css文件中，需要通过link标签在网页中引入。：css写在标签的style属性内（后续配合js）

2024-03-12 22:42:55 285 1

原创 HTML表单标签2

有语义的布局标签（手机端网页布局，无效果，后续通过css添加）没有语义布局的标签（网页布局，无效果，后续通过css添加）span：一行显示多个，不独占一行。在网页中提供可输入多行文本的表单控件。option 下拉菜单的每一项。div：一行只显示一个，独占一行。select 下拉菜单的整体。cols 规定文本域的可见宽度。rows 规定文本域的可见行数。网页不认识多个空格，只认识一个。section 网页区块。article 网页文章。footer 网页底部。header 网页头部。

2024-03-10 11:07:32 400 1

原创 HTML表单标签

用于绑定内容与表单标签的关系(例如单选框，不用点那个圆，点字也可以选择）需要配合form标签使用，用form标签把表单标签一起包裹起来。name 用于分组，相同属性值的单选框为一组，一组只能选一个。password，密码框，用于输入密码（默认内容变成圆点）在网页中显示收集用户信息的表单效果，如登录页，注册页。reset 重置按钮，用于重置，恢复默认表单值。可以通过type属性的不同，展示不同的效果。checkbox，多选框，用于多选多。text，文本框，用于输入单行文本。radio,单选框，用于多选一。

2024-03-09 17:53:33 628 1

2301_77584408的博客