手機適配 問題:一個圖片比較大或者比較小，怎么適配手機怎么優化?
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>