css - 面试题

css面试题

选择器的优先级

!important > 内联样式 > ID选择器 > 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] > 元素选择器 = 伪元素选择器(:after/:before/::selection等) > 通用选择器(*) >继承的样式

网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

常见情况

水平垂直居中

 第一种
 
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
第二种
 
#container{
    position:relative;
}
 
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
第三种
 
#container{
    position:relative;
}
 
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
第四种 flex
 
#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

右边宽度固定，左边自适应

 第一种：
 
<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
第二种
 
<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

posted @ 2021-06-22 17:15 zc-lee 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

css - 面试题

css面试题

选择器的优先级

网页布局有哪几种，有什么区别

常见情况

水平垂直居中

右边宽度固定，左边自适应

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	第一种

	#container{
	position:relative;
	}

	#center{
	width:100px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}
	第二种

	#container{
	position:relative;
	}

	#center{
	width:100px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-50px 0 0 -50px;
	}
	第三种

	#container{
	position:relative;
	}

	#center{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	}
	第四种 flex

	#container{
	display:flex;
	justify-content:center;
	align-items: center;
	}

	第一种：

	<style>
	body{
	display: flex;
	}
	.left{
	background-color: rebeccapurple;
	height: 200px;
	flex: 1;
	}
	.right{
	background-color: red;
	height: 200px;
	width: 100px;
	}
	</style>
	<body>
	<div class="left"></div>
	<div class="right"></div>
	</body>
	第二种

	<style>
	div {
	height: 200px;
	}
	.left {
	float: right;
	width: 200px;
	background-color: rebeccapurple;
	}
	.right {
	margin-right: 200px;
	background-color: red;
	}
	</style>
	<body>
	<div class="left"></div>
	<div class="right"></div>
	</body>