当前位置: 首页 > Web前端 > CSS

前端基础知识学习记录(一)

时间:2023-03-30 17:46:08 CSS

p{}前端基础知识学习记录(一)1.CSSposition属性通过使用position属性,可以选择四种不同的定位方式,会影响元素的方式帧生成。position属性值的含义:static:正常生成元素框。块级元素生成一个矩形框作为文档流的一部分,而内联元素创建一个或多个行框放置在它们的父元素中。relative:相对定位。定位是相对于元素的原始位置完成的。元素框偏移一定距离,原先占据的空间依然存在。absolute:绝对定位。相对于其包含块定位,该包含块可能是文档中的另一个元素或初始包含块;除了静态定位,也可以说是相对于第一个父元素定位。元素先前在正常文档流中占据的空间被关闭,就好像该元素不存在一样。定位元素以生成块级框,而不管它最初在正常流中生成的框类型。fixed:相对于浏览器窗口的位置。2.CSS显示属性block,inline,inlinke-blockdisplay:block;块元素将占据一行,多个块元素将各自开始一个新行。默认情况下,块元素的宽度会自动填充其父元素的宽度,您可以自己设置宽度、高度、边距和填充属性。display:inline;内联元素不会占一行,多个相邻的内联元素会排在同一行,换行直到排不下为止。宽度随着元素内容的变化而变化,不能自己设置宽度。high,可以设置水平方向的margin和padding属性,但是不能设置垂直方向的margin和padding属性。显示:内联块;将对象呈现为内联对象,但对象的内容呈现为块对象。即后面的对象会排在同一行,也可以自己设置width、height、margin、padding属性。3.CSS选择器CSS元素选择器:也称为类型选择器,它匹配文档树中元素类型的每一个实例。示例:p{}

类选择器:类选择器允许您以独立于文档元素的方式指定样式。选择器可以单独使用,也可以与其他元素结合使用。示例:p.box{}

ID选择器:ID选择器允许指定样式的方法。在一个文件中只能使用一次;和ID选择器不能组合使用(ID属性不允许使用空格分隔的单词列表)。示例:#box{}
属性选择器:属性选择器可以根据元素的属性和属性值来选择元素。示例:a[href]{}后代选择器:也称为包含选择器,可以被选为一个后代元素元素。示例:h1em{}

子元素选择器:选择作为子元素的元素元素。示例:h1>strong{}

相邻兄弟选择器:可选择的元素紧跟在另一个具有相同父元素的元素之后。示例:h1+p{}

伪类:用来添加一些选择器添加特殊效果。示例:a:hover{}伪元素:用于给某些选择器设置特殊效果。