- 博客(21)
- 收藏
- 关注
原创 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
原创 CSS选择器
写在开始标签里面,写一个style属性,讲一组一组的样式写在style属性值里面。通过选择器选中对应的要设置的元素/标签,在{}里设置一组一组样式。link标签里有href属性,在href里写引入css文件的路径。在html文件的外部新建一个.css文件,在css文件里写样式。写在head标签内部,写一个子元素,style标签,然后通过在head标签内部写子标签link标签,可以写多组样式,但一定要用;也可以写多组样式,也需要用;-- 第三种方式:外部样式表。第一种方式:内联样式/行内样式。
2022-10-10 16:13:09
50
原创 img标签及其属性
width属性和height属性,一般情况不会同时设置,只设置一个,另一个浏览器会自适应缩放。alt属性 对图片的描述,在图片引入不成功的时候,会显示出来。img标签 引入图片 自结束标签。height属性 设置图片的高度。width属性 设置图片的宽度。src属性 引入图片的路径。
2022-10-10 16:07:36
983
原创 块元素,行内元素,行内块元素
4、行内元素里面有一个特殊的a标签,a标签里面什么都能放,除了它自己。1、块元素里面什么都能放,能放块元素,行内元素,行内块元素。常用的行内元素:span、em、strong、del。3、块元素里有一个特殊的p标签,p标签里面只能放文字。2、行内元素里面不能放块元素,一般只用来包裹文字.如果你放了块元素,也不会报错,但不符合规范要求。常用的块元素:h1-h6,p,div。2、行内元素 主要是用来包裹文字。特点:兼具块元素和行内元素的特点。1、块元素 主要是用来布局。常用的行内块元素:img。
2022-10-10 16:06:06
368
原创 选择器的权重
1、比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示。important 最高优先级 慎用 一般是用来检测是否是选择器权重问题。通配符、子选择器、相邻选择器等。例如:类选择器再高也不会超过id选择器 量变达不到质变。3、 如果优先级计算后相同,此时则优先使用靠下的样式。2、 (并集选择器)分组选择器是单独计算的。4、选择器的累加,不会超过上一级数量级,以下的选择器权重从高到低排列。类和伪类选择器/属性选择器。选择器越具体,优先级越高。继承的样式 没有优先级。
2022-10-10 16:04:06
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人