1.边框紧靠变粗，用margin负值，让第二个框压上去
2.鼠标 经过边框变色，因为之前压住了，所以有的边框只能显示三边
有两种解决方案
总结
3.利用浮动压不住文字
4.行内块元素的巧妙运用，给父亲设置text-align：center
里面的元素自动居中对齐
5.强化三角
把上宽拉高，只有右边保留颜色，得到一个蓝色这样的直角三角形
6.CSS初始化
6.前端常用布局方案
收藏！40 个 CSS 布局技巧_阿里云开发者的博客-优快云博客简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果，希望对同学们有所帮助。一 水平垂直居中如何实现水平垂直居中可以说是CSS面试题中的经典面试题，在多年前
https://blog.youkuaiyun.com/alitech2017/article/details/107460459?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164915075216781685394934%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164915075216781685394934&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-15-107460459.142%5Ev5%5Econtrol,157%5Ev4%5Enew_style&utm_term=%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B8%83%E5%B1%80%E6%8A%80%E5%B7%A7&spm=1018.2226.3001.4187
7.如何实现下图效果：
//定义一个大容器与body同宽（100%）,在里面在包一个容器设置margin，让左右两边留白
<div class="container">
<div class="inner">
<div class="book one"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
<div class="book"><img src="./u=1372911147,660625881&fm=202&mola=new&crop=v1.png" /></div>
</div>
</div> .container {
width: 100%;
background-color: wheat;
display: flex;
}
.inner {
background-color: red;
width: 100%;
margin: 0 10px;
display: flex;
overflow-x: auto;
}
//取消滚动条
.inner::-webkit-scrollbar {
display: none;
}
//默认每行第一个margin为0
.book:nth-child(1) {
margin: 0;
}
.book {
display: flex;
width: 100%;
margin-left: 8px;
justify-content: space-between;
}
8.CSS 之 百分比（%）样式属性
一、取决于父元素
1、(max/min-) height
如果给子元素的height属性设置为 % ，则其基数取决于父元素的height属性。
2、(max/min-) width
如果给子元素的width属性设置为 % ，则其基数取决于父元素的width属性。
3、padding
如果给子元素的padding属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。
4、margin
如果给子元素的margin属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。
5、border
如果给子元素的border属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。
6、text-indent
如果给子元素的text-indent属性设置为 % ，则其基数都取决于父元素的width属性。
7、font-size
如果给子元素的font-size属性设置为 % ，则其基数都取决于父元素的font-size属性。
二、取决于元素本身
1、border-radius
如果元素的border-radius属性设置为 % ，则其基数都取决于元素本身的宽高属性。
2、transform:translate()
如果元素的translate()/translateX()/translateY()属性设置为 % ，则其基数都取决于元素本身的宽/高属性。
3、background-size
如果元素的background-size属性设置为 % ，则其基数都取决于元素本身的宽/高属性。
4、line-height
如果元素的line-height属性设置为 % ，则其基数都取决于元素本身的font-size属性。
5、vertical-align
如果元素的vertical-align属性设置为 % ，则其基数都取决于元素本身的line-height属性。
三、特殊
1、background-position
该属性设置 % 的情况比较特殊，有两个值分别设置水平方向和垂直方向上的两个值，若是只提供一个百分数值，所提供的这个值将用做水平值，垂直值将假设为 50%。如果使用百分比，那么百分比值会同时应用于元素和图像。例如50％50％会把图片的（50％，50 ％）这一点与框的（50％，50％）处对齐，相当于设置了中心。同理0％0％相当于左上对齐，100％100％相当于右下对齐。
2、position
如果给子元素的left、right属性设置为 % ，则其基数都取决于离它最近的position为absolute/relative/fixed的祖先元素的width属性。 如果给子元素的top、bottom属性设置为 % ，则其基数取决于离它最近的position为absolute/relative/fixed的祖先元素的height属性。
扫一扫
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
