滑铁卢小吴-CSDN博客

原创 css/html 定位绝对定位/相对定位

元素是随着滚动条滚动而滚动的，当到达top值的时候，就不会随着滚动条滚动而滚动了。一般情况，如果给元素开启一个绝对定位，同时也会给其父元素开一个相对定位。2、如果有定位的时候，包含块就是离元素最近的开启了定位的祖先元素，2、开启粘滞定位，一般配合top值使用，在没有到达top值的时候，元素的性质不会改变，也就是块元素还是块元素，行内元素还是行内元素。1、开启粘滞定位，元素不会脱离文档流，元素的性质也不会发生变化。1、开启相对定位，如果没有设置偏移量，元素的位置是不发生变化。

2022-10-20 17:00:05 860 1

原创高度塌陷以及如何解决

一般情况下，父元素的高度不会写固定值，而是让他被子元素撑开，随着子元素高度的变化而变化。当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素。可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，高度塌陷：给子元素设置浮动，子元素脱离文档流，就不能再撑开父元素的高度，元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失。由于这个div并没有浮动，所以他是可以撑开父元素的高度的，可以直接在高度塌陷的父元素的最后，添加一个空白的div，

2022-10-18 16:53:40 161

原创浮动的特点及运用

1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动。使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流。浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，5:如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动。

2022-10-17 18:23:27 219

原创 html盒子的阴影和圆角

border-radius 用来设置圆角以10px为半径画圆。第一个值：水平偏移量正->左负->右，必选。第二个值：垂直偏移量正->下负->上，必选。用来设置元素的阴影效果，不会影响到页面布局。第三个值：模糊半径默认0px，可选。第四个值：颜色默认是黑色，可选。

2022-10-17 18:20:59 487

原创盒子模型的边框设定

边框的大小如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样。边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。掌握：跟多个值的情况、单独设置某一边、默认值、样式的可选值。设置边框必须指定三个样式边框大小、边框的样式、边框的颜色。1、同时设置边框的大小，颜色，样式，没有顺序要求。border-bottom 设置下边框。边框大小：border-width。边框颜色：border-color。border-left 设置左边框。边框（border）元素设置边框。

2022-10-14 17:19:27 1853

原创 CSS文档流

一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在。网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层。2:宽度高度默认都是被内容撑开的，不能自己定义宽高。元素分为两种状态：在文档流中，脱离文档流。我们创建的元素默认情况下，都在文档流中。2:块元素的宽度默认是父元素的100%3:块元素的高度默认是被内容撑开的。文档流（normal flow）1、不会独占一行，可以设置宽高。元素在文档流中的特点。内联元素（行内元素）

2022-10-14 17:18:01 102

原创 CSS文本样式

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰。（4）、阴影的颜色一般用rgba颜色可选，默认是字体的颜色。1: text-transform 可以用来设置文本的大小写。(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选。(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选。设置网页如何处理空白。5: text-align用于设置文本的对齐方式。

2022-10-14 17:17:07 54

原创 CSS行间距

其中，字体是垂直居中显示，上间距=下间距。2、还可以放倍数，是当前字体大小的倍数。font:字体大小/行高字体类型;1、行高（line height）1、直接放一个大小，例如：40px。只要设置父元素的行高和高度一致即可。行高=上间距+字体的大小+下间距。line-height 设置行高。2、单行文本在父元素中垂直居中。3、font中也可以指定行高。

2022-10-14 17:14:30 419

原创 CSS字体

一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底。2:font-size 设置字体的大小,注意不同的单位px，em，rem。3:font-family 可以指定文字的字体设计师也会提前设计好。1:color 设置字体颜色,也可以设置其他颜色,例如边框的颜色等。可以将字体设置为这些大的分类,当设置为大的分类以后，fantasy ['fæntəsi]（虚幻字体）cursive ['kə:siv]（草书字体）serif ['serif]（衬线字体）monospace （等宽字体）

2022-10-14 17:13:35 59

原创 CSS颜色的单位

常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#fff。4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只不过表示的方式不一样。红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位。red,green,yellow等，一些简单的颜色，可以用英文单词。rgb（red，green，blue）浓度0-255。1:在CSS可以直接使用颜色的单词来表示不同的颜色。HSLA值（色度，饱和度，亮度，透明度）0是透明，1是不透明。

2022-10-11 08:37:38 850

原创 CSS字体的单位

相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size。相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-size，实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px。如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，也是我们最常用的长度单位，它是固定单位。

2022-10-10 16:24:49 442

原创 CSS继承原则

注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承，背景图片等，也都不会被继承。span 的背景色是透明的，你给其它元素设置了背景色，会“透”出来。共同的祖先元素，一般会设置字体的大小，颜色，行高，字体，最小宽度。优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，定义：为一个元素设置的样式，同时也会应用到它的后代元素上。样式的继承（继承祖先的资产）子元素的样式都可以获取到样式。

2022-10-10 16:23:07 170

原创 CSS伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）before和after必须要结合content使用。::first-letter 表示第一个字母。::first-line 表示第一行。::selection 选中的内容。::before 元素的开始位置。::after 元素的结束位置。content: '你也好';content: "你好";

2022-10-10 16:21:12 86

原创 a元素的伪类

link,:visited 是超链接独有的，一般用的不是很多，了解即可。4、:active 鼠标点击后的状态 ,松开鼠标，点击的状态就会结束*/:hover,:active 是所有的标签都有，用的比较多，必须掌握。1、:link 用来表示未访问过的链接（正常链接）2、:visited 用来表示访问过的链接。3、:hover 用来表示鼠标移入的状态。伪类只是表示一种特殊的状态。

2022-10-10 16:19:48 103

原创 CSS常见选择器

例子：h1{},h2{},p{},div{},span{}[属性名=属性值]{} 选择含有指定属性和属性值的元素。[属性名^=属性值]{} 选择属性值以指定值开头的元素。[属性名$=属性值]{} 选择属性值以指定值结尾的元素。-比如：第一个元素，被点击的元素，鼠标移入的元素···[属性名*=属性值]{} 选择属性值含有某值的元素。语法：选择器1,选择器2,选择器3····{}语法：[属性名]{} 选择含有指定属性的元素。例子：#p1{},#pp{},#abc{}语法：选择器1选择器2选择器3····{}

2022-10-10 16:18:00 2640

wyt20040310的博客