手机适配 问题:一个图片比较大或者比较小,怎么适配手机怎么优化?
https://blog.csdn.net/rj_jqd/article/details/8651251
一个p标签,不换行,超出部分显示为省略号?
p{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
如何找到所有 HTML select 标签的选中项?
$('[name=selectname] :selected')
css实现字体大写?
<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase};//大写
p.lowercase {text-transform: lowercase};//小写
p.capitalize {text-transform: capitalize};//首字母大写
</style>
</head>
<body>
<p class="uppercase">This is some text in a paragraph.</p >
<p class="lowercase">This is some text in a paragraph.</p >
<p class="capitalize">This is some text in a paragraph.</p >
</body>
</html>
用一个div模拟textarea的实现
<style>
#textarea {
height: 200px;
width: 300px;
padding: 4px;
border: 1px solid #888;
overflow: auto;
}
</style>
</head>
<body>
<div id="textarea" contenteditable="true"></div>
</body>
纯css画三角形?
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242
一个背景图的线性渐变?
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to right, red, blue);
}
一个满屏品字布局如何设计?
第一种真正的品字:
- 三块高宽是确定的;
- 上面那块用margin: 0 auto;居中;
- 下面两块用float或者inline-block不换行;
- 用margin调整位置使他们居中。
第二种全屏的品字布局: 上面的div设置成100%,下面的div分别宽50%,然后使用float或者inline使其不换行。
圣杯布局和双飞翼布局?
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542
如何让一个不定宽高的盒子水平垂直居中?
定位的方式
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
css3属性
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex布局
.father {
display: flex;
justify-content: center;
align-items: center;
}
让大div里面的小div水平垂直都居中
<div class=”parent”>
<div class=”child”></div>
</div>
①相对/绝对定位法
.parent{
position:relative;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
postion: absolute;
top: 50%;
left: 50%;
width:100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border: 1px solid violet;
}
注意点:使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.
②利用定位及margin:auto实现
.parent{
position:relative;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
botton: 0;
/*width:100px;
height: 100px;*/
margin: auto;
border: 1px solid violet;
}
实现原理:设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;
优点:可不用知道子div的高宽
③使用dosplay:table-cell
.parent{
display: table-cell;
width: 300px;
height: 200px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
heiht: 100px;
border: 1px solid violet;
}
实现原理:display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.
组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中(也就是将内部的元素设置display:inline-block)
④使用弹性布局display:flex
.parent{
display: flex;
width: 300px;
height: 300px;
border: 1px solid red;
justify-content: center;
align-items: center;
}
.child{
width: 100px;
height: 100px;
border: 1px solid violet;
}
⑤计算四周的间距设置子元素与父元素之间的margin-top和margin-left;
.parent{
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 100px;
}
三栏布局:假设高度已知,其中左栏、右栏宽度各位300px,中间自适应?
<style type=”text/css”>
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
①浮动方法
<section class=”layout float”>
<article class=”left-right-center”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”>
<h1>浮动解决方案</h1>
这是三栏布局中间部分
</div>
</ article >
</section>
<style type=”text/css”>
.layout.foat .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yelleow;
}
</style>
②绝对定位方法
<section class=”layout absolute”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>绝对定位解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.absolute .left-center-right{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
③flex布局方法
<section class=”layout flexbox”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>flex布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.leftbox .left{
width: 300px;
background: red;
}
.layout.felxbox .cneter{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
④表格布局方法
<section class=”layout table”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>表格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.table .left-center-right{
display: table;
width: 100%;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
widht: 300px;
backgorund: blue;
}
</style>
⑤网格布局方法
<section class=”layout grid”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>网格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
每个布局方案的优缺点:
浮动布局: 缺点:脱离文档流(需要清楚浮动以及处理好浮动周边的关系);
优点:兼容性较好
绝对定位: 缺点:布局脱离文档流,使得其子元素也必须脱离文档流,导致其有效性和可用性比较差;
优点:快捷,配合JS使用非常快也不容易出问题
flex布局: CSS3主要解决上述两种布局的缺点,比较完美,用于移动端;
表格布局: 缺点:当其中一个单元格高度超出的时,其他高度也会变化;
优点:方便,兼容性好
网格布局: 新技术,使布局不再是模拟网格布局,可以做很多复杂的事情但代码量能减少很多
补充:如果中间内容高于容器高度,flex和table布局可用
扩展:三栏布局
左右宽度固定,中间自适应
上下高度固定,中间自适应
两栏布局
左宽度固定,右自适应
右宽度固定,左自适应
上高度固定,下自适应
下高度固定,上自适应
一个块级元素的水平居中,你有哪几种方式可以实现?使用flex让元素水平居中有做过吗?
①.子绝父相
<style>
.father{
position:relative;
width:400px;
height:400px;
background:blue;
}
.son{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background:red;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
注意:外层div要设定高度和宽度
缺点:当子元素宽高大小不是偶数时,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。会导致子元素内部字体边缘模糊。
transform:translate (-50%,-50%) 造成的文字边缘模糊解决方案 https://www.aliyun.com/jiaocheng/639148.html
②.父元素弹性布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
display: flex;
width: 400px;
height: 400px;
background: red;
justify-content: center;
/*x轴对齐方式*/
align-items: center;
/*y轴对滴方式*/
}
.son {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>