网站设计 电子购物网站设计,建设部人事教育司网站,自已的电脑怎么做网站,住房和城乡建设部令第37号一#xff1a;CSS基础
1#xff1a;CSS选择器及其优先级
2#xff1a;display的属性值及其作用
属性值作用none元素不显示#xff0c;并且会从文档流中移除block块类型#xff0c;默认元素为父元素宽度#xff0c;可设置宽高#xff0c;换行显示inline行内元素类型CSS基础
1CSS选择器及其优先级
2display的属性值及其作用
属性值作用none元素不显示并且会从文档流中移除block块类型默认元素为父元素宽度可设置宽高换行显示inline行内元素类型默认宽度为内容宽度不可设置宽高同行显示inline-block默认宽度为内容宽度可以设置宽高同行显示list-item像块类型元素一样显示并添加样式列表标记table此元素会作为块级表格来显示inherit规定应该从父元素继承dispaly属性的值 3display的block、inline和inline-block的区别
1block会独占一行 多个元素另起一行 可以设置width,height,margin和padding属性
2inline元素不会独占一行 设置width,height无效 水平方向可设置margin和padding 垂直方向不可以。
3inline-block对象设置为inline对象 对象的内容作为block呈现
4行内元素和块级元素的特点 1行内元素 - 设置宽高无效 - 可以设置水平方向的margin和padding垂直方向不可以 - 不会自动换行 2块级元素 - 可以设置宽高 - 设置margin和padding都有效 - 可以自动换行 - 多个块状默认排列从上到下
4隐藏元素的方法有哪些
属性值占据空间响应绑定监听事件display:none不会在页面中占据位置不响应visibility:hidden占据空间不响应opacity:0占据空间响应position:absolute元素移除可视区域-z-index:负值元素被其余元素遮盖-clip/clip-path占据位置不响应transform:scale(0,0)占据位置不响应
5link和import的区别
两者都是外部引用CSS的方式区别如下
linkimportXHTML标签除了加载CSS外还可以定义RSS等事务只能加载CSS引用CSS时页面载入时同时加载页面完全载入以后加载无兼容问题低版本浏览器不支持支持使用JavaScript控制DOM去改变样式不支持
6display:none与visibility:hidden的区别
两个属性都是让元素隐藏不可见
1在渲染树中 display:none 元素从渲染树中消失不会占据空间 visibility:hidden 不会让元素从渲染树中消失会占据响应的空间
2是否继承属性 display:none 非继承属性 子孙节点会随着父节点从渲染树消失 修改子节点的属性也无法显示。 visibility:hidden 继承属性 子孙节点消失继承了hidden 设置visibility:visible 可以让子孙节点显示.
3修改文档流 display会重排 visibility会重绘
4使用读屏器 display:none的内容不会被读取 visibility:hidden的内容会读取
7伪元素和伪类的区别和作用
伪元素内容元素的前后插入额外的元素和样式这些元素并不会在文档中生成
伪类将特殊的效果添加到特定选择器上
总结伪类是通过在元素选择器上加⼊伪类改变元素状态⽽伪元素通过对元素的操作进⾏对元素的改变。
8 对盒模型的理解
CSS3中盒模型分为两种标准盒子模型、IE盒子模型
四部分组成margin,border,padding,content
标准盒模型和IE盒模型的区别在于设置width和height时所对应的范围不同
标准盒模型的width和height属性的范围只包含了contentIE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型
box-sizeing: content-box表示标准盒模型默认值box-sizeing: border-box表示IE盒模型怪异盒模型
9margin和padding的使用场景
1需要在border外侧添加空白且空白处不需要背景色时margin
2需要在border内测添加空白且空白处需要背景色时padding
10z-index属性在什么情况下会失效
1父元素position为relative时子元素的z-index失效。
2元素没有设置position属性为非static属性
3元素设置z-index的同时还设置了float浮动
二页面布局
1常见的CSS布局单位
px,%,em.rem,vw/vh
1px页面布局的基础 终端屏幕所能显示的最小区域
2%可以使得浏览器组件中的宽高 随着浏览器的变化而变化
3em,rem em相对于父元素 rem相对于根元素
4vw / vh与视图窗口有关的单位
2px,em,rem的区别及使用场景
px固定的像素一旦设置了就无法适应页面大小而改变
em和rem相对于px更具灵活性 相对长度单位 长度不是固定的更适用于响应式布局
em相对于父元素rem相对于根元素
3两栏布局的实现
左边一栏宽度固定右边一栏宽度自适应
1浮动 左边元素宽度设置200px向左浮动 右边元素margin-left:200px宽度auto
2flex布局 左边固定宽度200px 右边设置为flex:1
4三栏布局的实现
左右两栏宽度固定中间自适应布局
1绝对定位左右两栏设置为绝对定位中间设置对应方向大小的margin的值
2flex布局左右栏设置固定大小中间一栏设置flex:1
3利用浮动左右栏设置固定大小 设置对应方向的浮动 中间一栏设置左右两个方向的margin
5水平垂直居中的实现
1绝对定位top:50%,left:50%;transform:translate(-50%,-50%)
2绝对定位四方向设置为0 margin:auto宽高固定
3flex布局align-item:center / justify-content:center
6对flex布局的理解及其使用场景
1flex-direction属性决定主轴的方向
2flex-wrap一条轴线排不下如何换行
3flex-flowflex-direction和flex-wrap属性的简写形式
4justify-content定义了项目在主轴上的对齐方式
5align-items项目在交叉轴上的如何对齐
6align-content多根轴线的对齐方式
flex布局是CSS3新增的一种布局方式可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器它的所有子元素都会成为它的项目。一个容器默认有两条轴一个是水平的主轴一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目可以使用order属性来指定项目的排列顺序还可以使用flex-grow来指定当排列空间有剩余的时候项目的放大比例还可以使用flex-shrink来指定当排列空间不足时项目的缩小比例。
