CSS流式布局(百分比布局)和圣杯布局 流式布局,就是百分比布局,也称非固定像素布局,是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度。通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。给父元素设置相对定位,左侧和右侧设置绝对定位,值为0,父元素的左右侧padding值为相应的宽度值。给左侧设置浮动:float:left,右侧设置超出隐藏:overflow:hidden。给父元素设置相对定位,左侧padding值设置为他的宽度值,左侧绝对定位,值为0。2.使用position定位实现。
CSSflex弹性盒子 语法:justify-content:center 属性值: 语法:justify-content:center 属性值:主轴起点对齐 主轴起点对齐主轴终点对齐 主轴终点对齐居中 居中两端对齐,项目之间的间隔都相等。两端对齐,项目之间的间隔都相等。每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍。每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍可以使每个元素之间和元素距离边距的距离都相等,但是兼容性比较差。案例一:中间对齐,两侧不固定<style>.box{
CSS背景属性 background 设置背景的显示方式,是一个间歇性属性设置顺序为:background-color background-image background-repeat background-attachment background-position属性:background-color 背景颜色background-image 背景图片background-repeat 背景平铺方式background-attachment 背景图片固定方式。
CSS盒模型和box-sizing 说明:这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。块级元素的垂直相邻外边距合并,而行内元素实际上不占上下外边距,行内元素的左右外边距不会合并。content-box 指定盒模型为W3C标准模型,元素的宽度=设置宽度+边框宽度+内边距。元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距。说明:这个简写属性设置一个元素所有外边距的宽度,或者设置各边距的宽度。IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高。% 基于父级元素宽度的百分比的外边距。
CSS伪类和伪元素 CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。建议使用双冒号的写法,更容易识别出是伪类还是伪元素。如果想要给该段落的第一个字添加样式,可以在第一个字中包裹一个元素,并设置该span元素的样式 如果不创建一个元素,我们可以通过设置 的::first-letter伪元素来为其添加样式。
CSS文本属性 可以单独设置 text-decoration-line、 text-decoration-color、和 text-decoration-style属性。text-indent属性将页面上的段落的第一行进行缩进(首行缩进),这是一种最常用的文本格式化效果。语法:text-shadow:x-shadow y-shadow blur color。通过文本属性,您可以改变文本的颜色,字符间距,对齐文本,装饰文本,对文本进行缩进等等。text-decoration 属性设置文本装饰线条的位置,综合属性。