- 博客(30)
- 收藏
- 关注
RSS订阅原创 css盒模型的外边距问题
问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值。- 问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值。- 常见块级元素 div，h1-h6，p，ul，li，dl，dt，ol。- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。
2023-02-27 08:32:43
195
原创 选择器的继承属性
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。>(２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０。>(４)结合符和通配选择器对特殊性没有贡献．其特殊性为０，０，０，０。>(３)对于选择器中给定的各个元素和伪元素，加０，０，０，１。>(１)对于选择器中给定的各个ID属性值，加１，０，０，０。>概述：选择器的权重表述为4个部分，比如０，０，０，０。>(５)每个内联声明的特殊性都是１，０，０，０。##### 3.2.3、继承样式的优先级。
2023-02-27 08:29:08
212
原创 vertical-align 属性详解
作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐。- bottom 把标签的顶端与行中最低的标签的顶端对齐。- baseline 默认。标签放置在父标签的基线上。- top 把标签的顶端与行中最高标签的顶端对齐。- middle 把此标签放置在父标签的中部。- 图片与图片垂直方向的对齐（行内块与行内块）- 作用1：回顾表格处的应用。- 图片与文字垂直方向的对齐。#### 2、常用的值。#### 3、典型应用。
2023-02-27 08:27:11
236
原创 图片间隙的解决办法
4、为img标签设置垂直对齐方式 img{vertical-align：不为默认值 baseline}**2、给img的父元素设置font-size：0；或者 line-height：0；*图片下间隙出现的原因： 父元素没有设置高度，由图片撑开，就是有间隙**3、给img标签转换为块级标签 display：block;*1、给img的父元素设置高度，高度和图片的高一致；
2023-02-27 08:26:24
273
原创 css边框属性
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。设置标签所有边框的样式，或者单独地为各边设置边框样式。设置所有边框颜色，或者单独地为各边边框设置颜色。/* 单个边拆分的写法 */- padding-bottom 设置标签的下内边距。- 4个值：分别表示【上，右，下、左】的内边距值。- 3个值：分别表示【上，左右，下】的内边距值。
2023-02-27 08:25:48
224
原创 css盒模型
CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。设置所有边框宽度，或者单独地为各边边框设置宽度。#### 3.1、border-width边框宽度。- 4个值 设置上、右、下、左。- 1个值 设置所有边框宽度。- 3个值 设置上、左右、下。- 2个值 设置上下、左右。
2023-02-27 08:24:56
65
原创 初识css 什么是css？
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种：行间样式表、内部样式表、外部样式。为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】- CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 在head标签的内部，由style标签包含的样式称为内部样式。- 行间样式适用于某个元素拥有特殊样式时使用，结构表现【不分离】
2023-02-26 16:42:15
84
原创 id 选择器的用法
多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等。>最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)>- 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题。>- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。>- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。>- 左边是 HTML 元素结构，右边是 CSS 样式。
2023-02-26 16:41:48
1481
原创 表格的作用html
电话 - 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。- 作用：使用表格的边框属性可以显示一个带有边框的表格。 电话 电话
2023-02-26 16:40:40
175
原创 文本格式化标签
与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。- 不应该只为了实现加粗、斜体效果使用strong，em，可以使用css替代。常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。定义粗体文本,用于吸引读者的注意到该元素的内容上。作为行内容器包含短语内容，通常用来区分文本样式。
2023-02-26 16:39:28
281
原创 img标签
页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。-- ./ 可以省略 -->- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验。图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。- 作用：用于指定图像文件的路径和文件名。
2023-02-26 16:37:44
1343
原创 html列表 有序列表
步骤一步骤二type属性不常用，通常使用css属性替代。- 营养信息标签上 按含量排序的成分列表。(5)type属性（了解）- `i`: 小写罗马数字。- `I`: 大写罗马数字。(4)典型应用 （图示）- 烹饪食谱中的各个步骤。- 指路时的各处转弯方向。出门右转
2023-02-26 16:35:52
133
原创 html列表
步骤一type属性不常用，通常使用css属性替代。- 营养信息标签上 按含量排序的成分列表。苹果香蕉- circle 列表样式空心圆。- square列表样式为小方块。苹果香蕉
2023-02-26 16:33:18
134
原创 响应式开发
具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。这样就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小。1.可以根据设备显示器的特性，来设置不同的css的样式。
2023-02-26 16:31:01
84
原创 background多背景
contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）* cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）- 不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）- background-origin: border-box;
2023-02-24 21:00:47
751
原创 animation动画
动画名字 动画持续时间 动画时间函数 动画延迟时间 动画执行次数 动画的方向 动画的播放状态 填充模式。- alternate-reverse：反向正向交替——》 动画先反运行再正方向运行，并持续交替运行。- alternate：正向反向交替—》动画先正常运行再反方向运行，并持续交替运行。- forwards 动画结束之后停留在结束帧状态。- 进场之前和动画结束之后都停留在元素的初始状态。- 默认值为0，需要设置该属性，否则不会播放动画。@-webkit-keyframes 动画名{
2023-02-24 20:58:04
2846
原创 相对定位 绝对定位 固定定位实现及应用
相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。它原本所占的空间不会改变。没有定位父级时相对于HTML进行定位，有定位父级时相对于最近的定位父级进行定位。元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。- 不定义偏移量时对元素基本没有影响。
2023-02-24 20:51:07
155
原创 html新手必看 定位属性
使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。边偏移定位元素的位置，使用`top`、`right`、`bottom`和`left`来描述。定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）。- bottom：设置距离包含块底部的距离。- right：设置距离包含块右侧的距离。
2023-02-24 20:44:40
480
原创 html 渐变属性详细内容
background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);方向：数值（单位deg)、关键词（left|right top|bottom)颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)方向：加前缀需要把to去掉，方向是相反的。- to right bottom 方向朝向右下角。- to right top 方向朝向右上角。- to left bottom方向朝向左下角。- to top left 方向朝向左上角。
2023-02-24 20:41:15
1050
原创 css精灵技术
CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。- 减少网页的 http 请求，从而大大的提高页面的性能。- 必须要限定容器大小符合背景图元素位置。- 图片命名上的困扰。
2023-02-24 20:38:34
49
原创 html移动端的基础认识
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕下的显示效果会变成也买你元素的宽度被拉长。rem--css3中的一个单位，相对单位，根据根元素的字号大小进行计算的单位--2、动态计算并且设置不同的尺寸的html的fongt-size属性。width：虚拟窗口的屏幕宽度 device-width设备宽。vw布局--改变font-size的属性值不需要js文件--px-to-rem插件： 选中要换算的代码：alt+z。initial-scale 页面的初始缩放比。
2023-02-24 20:29:58
123
原创 rem通用格式懒人专用
/ 手机屏幕 大于 设计稿件 ，就按照1:1的大小去制作。// 赋值 html标签设置font-size。// psd设计稿的宽度为750px。// 获取当前屏幕宽度字体的基础值。// 只要屏幕的宽度改变就调用auto函数。2、获取当前屏幕下html元素的字体大小。// 获取当前屏幕的宽度。预设字体基础值1rem=100px。1、获取当前屏幕的宽度。
2023-02-24 20:29:41
83
原创 弹性盒公式超详细
justify-content：space-around（四周对齐，子元素之前，之间，之后都有空白，并且空白自行分配，项目和项目之间的间隔要比项目的边框之间的间距大一倍）justify-content：space-between（两端对齐，子元素和元素之间有空白，项目之间的间距）有两条轴，，默认的主轴方向---x轴的方向、水平向右（左侧为主轴的起始点、右侧为主轴的终点）默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴的起始点、下方为侧轴的终点）align-items：flex-start;
2023-02-24 20:22:59
107
原创 表格标签html
版权声明：本文为CSDN博主「he1729」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。总结：划分表格的语义，实现长表格的分布加载，改变结构顺序，进行优先加载tbody。--定义表格的主体内容 一个表格里面可以包含多个tbody -->使用table标签定义表格，每个表格由若干行（由tr定行），每行被分为若干个单元格（由td定义）-- 表格标题 必须紧跟着table标签-->1、未定宽度和高度的表格，单元格的内容自适应。-- 定义表格页脚内容 -->
2022-11-06 16:44:06
178
2
原创 无序列表--没有顺序的一组内容
原文链接：https://blog.csdn.net/he1729/article/details/127654625。指是由这个文件所在的位置为参考基础，而建立出的目录关系，常用的描述路径的方法：当前目录、上一级目录、下一级目录。注意事项：在链接到同一个网站的其他位置时，应该尽可能使用相对路径，链接到另外一个网站时，需要使用绝对链接。当鼠标悬停在图片上，鼠标的右下角出现对应的文字，对图片进行解释说明，有利于用户体验。跳转链接：专业名词/dt>
2022-11-06 16:42:21
173
1
原创 HTML标签
html：Hyper Text mark-up Language：超文本标记语言。内容注意事项：P标签里不能再嵌套【块级标签】；注意事项：h1标签在一个页面中只能有一个，h2~h6可以有多个。作用：用来划分网页的区块，里面可以嵌套任何标签。搭建网页结构的基本标签---盒子：无语义标签。双标签：内容应用场景：文章中的段落，页面中的文字块。单标签：或h系列标签：标题标签 h1~h6。
2022-11-01 19:35:53
130
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人