CSS盒子
1.width,height宽度高度。
<!DOCTYPE html>
<html>
<head>
<title>Width Height</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
div {
width: 400px;
height: 300px;
background-color: #ee3e80;}
p {
height: 75%;
width: 75%;
background-color: #e1ddda;}
</style>
</head>
<body>
<div>
<p>The Moog company pioneered the commercial manufacture of modular voltage-controlled analog synthesizer systems in the early 1950s.</p>
</div>
</body>
</html>
使用百分数时，盒子的大小与浏览器窗口的大小有关。如果是盒子套盒子，百分数就是相当于外部盒子而言。比如P就是300*75%=225
em值盒子大小以盒子中的文本为基准
rem相对于根元素的font-size（根元素为html）
（1）块元素block
在页面中独占一行
默认宽度：撑满父元素
高度：由内容撑开
可以通过css设置宽高
（2）内联元素inline
不独占一行，排列不下会在新的一行从右至左排列
高度宽度：由内容撑开
不可以通过css设置宽高
（3）内联块元素inline-block
不独占一行
高度宽度：由内容撑开
可以使用css设置宽高
代表：img元素
2.宽度限制min-width,max-width
保证在不同的设备上显示的效果不会太窄，宽。
<html>
<head>
<title>Min Width Max Width</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
th {
border-bottom: 1px solid #0088dd;
text-align: left;
color: #0088dd;
font-weight: normal;}
td {
min-width: 150px;
min-height: 200px;
vertical-align: top;
line-height: 1.4em;}
td.description {
min-width: 450px;
max-width: 650px;
text-align: left;
padding: 5px;
margin: 0px;}
</style>
</head>
<body>
<table>
<tr>
<th>Photo</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="images/rhodes.jpg" width="200" height="150" alt="Fender Rhodes" /></td>
<td class="description">The Rhodes piano is an electro-mechanical piano, invented by Harold Rhodes during the fifties and later manufactured in a number of models, first in collaboration with Fender and after 1965 by CBS. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td>
<td>$1400</td>
</tr>
<tr>
<td><img src="images/wurlitzer.jpg" width="200" height="150" alt="Wurlitzer EP200" /></td>
<td class="description">The Wurlitzer electric piano is an electro-mechanical piano, created by the Rudolph Wurlitzer Company of Mississippi. The Wurlitzer company itself never called the instrument an "electric piano", instead inventing the phrase "Electronic Piano" and using this as a trademark throughout the production of the instrument. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td>
<td>$1600</td>
</tr>
<tr>
<td><img src="images/clavinet.jpg" width="200" height="150" alt="Hohner Clavinet D6" /></td>
<td class="description">A Clavinet is an electronically amplified clavichord manufactured by the Hohner company. Each key uses a rubber tip to perform a hammer on a string. Its distinctive bright staccato sound is often compared to that of an electric guitar. Various models were produced over the years, including the models I, II, L, C, D6, and E7.</td>
<td>$1200</td>
</tr>
</table>
</body>
</html>
3.高度限制 min-height,max-height
<!DOCTYPE html>
<html>
<head>
<title>Min Height Max Height</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
h2, p {
width: 400px;
font-size: 90%;
line-height: 1.2em;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p {
min-height: 10px;
max-height: 30px;}
</style>
</head>
<body>
<h2>Fender Mustang</h2>
<p>The Fender Mustang was introduced in 1964 as the basis of a major redesign of Fender's student models then consisting of the Musicmaster and Duo-Sonic. It was originally popular in sixties surf music and attained cult status in the 1990s largely as a result of its use by a number of alternative rock bands.</p>
<h2>Fender Stratocaster</h2>
<p>The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p>
<h2>Gibson Les Paul</h2>
<p>The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p>
</body>
</html>
4.内容溢出overflow
告诉浏览器当盒子的内容超过盒子本身时如何显示，它有像个属性值可供选择。
hidden溢出部分隐藏
scroll添加滚动条
还有auto 和visible属性。
细分有overflow-x横向和overflow-y纵向。
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
<!DOCTYPE html>
<html>
<head>
<title>Overflow</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;
font-size: 90%;
line-height: 1.2em;
width: 200px;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p {
min-height: 30px;
max-height: 85px;}
p.one {
overflow: hidden;}
p.two {
overflow: scroll;}
</style>
</head>
<body>
<h2>Fender Stratocaster</h2>
<p class="one">The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p>
<h2>Gibson Les Paul</h2>
<p class="two">The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p>
</body>
</html>
5.边框，外边距和内边距
（1）每个盒子都有边框，边框将一个盒子的边缘和另一个盒子隔开。
（2）外边距位于边框的边缘之外。你可以通过设置外边距的宽度在两个相邻盒子的边缘之间创建空隙
（3）内边距是指盒子边框与盒子所包含内容之间的空隙。增加内边距可以提高内容的可读性。
5.边框宽度border-width
该属性可以是像素值也可以是以下值之一thin,medium,thick。不能是百分数
也可以通过border-top-width,border-right-width,border-bottom-width,border-left-width控制
border-width:2px 1px 1px 2px；顺时针上右下左
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 200px;
border-style: solid;}
p.one {
border-width: 2px;}
p.two {
border-width: thick;}
p.three {
border-width: 1px 4px 12px 4px;}
</style>
</head>
<body>
<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="two">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>
</body>
</html>
6.边框样式border-style
solid,实线。dotted方形点，dashed 虚线。double 双实线 groove雕入页面效果。ridge，凸起。inset嵌入，outset凸出屏幕。hidden/none不显示
同样可以用border-top-style,border-right-style,border-bottom-style,border-left-style;
<!DOCTYPE html>
<html>
<head>
<title>Border Style</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 250px;
border-width: 3px;}
p.one {
border-style: solid;}
p.two {
border-style: dotted;}
p.three {
border-style: dashed;}
p.four {
border-style: double;}
p.five {
border-style: groove;}
p.six {
border-style: ridge;}
p.seven {
border-style: inset;}
p.eight {
border-style: outset;}
</style>
</head>
<body>
<p class="one">Wurlitzer Electric Piano</p>
<p class="two">Wurlitzer Electric Piano</p>
<p class="three">Wurlitzer Electric Piano</p>
<p class="four">Wurlitzer Electric Piano</p>
<p class="five">Wurlitzer Electric Piano</p>
<p class="six">Wurlitzer Electric Piano</p>
<p class="seven">Wurlitzer Electric Piano</p>
<p class="eight">Wurlitzer Electric Piano</p>
</body>
</html>
7.边框颜色。rgb,十六进制，颜色名
border-top-color,border-right-color,border-bottom-color,border-left-color。
<!DOCTYPE html>
<html>
<head>
<title>Border Color</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
border-style: solid;
border-width: 3px;
width: 200px;}
p.one {
border-color: #0088dd;}
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
</style>
</head>
<body>
<p class="one">The ARP Odyssey was introduced in 1972.</p>
<p class="two">The ARP Odyssey was introduced in 1972.</p>
</body>
</html>
8.快捷方式写在一起
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 250px;
border: 3px dotted #0088dd;}
盒子内容区,width+padding+border
height+padding+border
margin外沿。
9.内边距padding
元素的内容与边框之间的距离。
通常以像素为单位。如果使用百分数就是浏览器窗口或盒子的百分比。
如果已经为盒子指定了宽度，那么内边距就会增加到这个盒子的宽度上。
inline元素的上下内边距无法完美设置。不建议使用。
padding-top,padding-right,padding-bottom,padding-left
或padding:10px 5px 3px 1px;
p.example {
padding: 10px;}
padding属性不回被子元素继承。
10.外边距margin
使用方法和padding类似。
行内元素的margin，上下无效，左右可以设置
margin的塌陷问题。一个父元素内，对第一个子元素设置Margin-top,对最后一个元素设置margin-bottom值，会引起塌陷。被父元素抢走margin属性。
解决方案（1）对父元素增加border
（2）父元素设置padding 1px
(3)设置overflow:hidden
11.内容居中
将left-margin和Right-margin设置为auto。居中显示需要为盒子设置一个宽度，否则的会占满整个页面。
<!DOCTYPE html>
<html>
<head>
<title>Centering Content</title>
<style type="text/css">
body {
text-align: center;}
p {
width: 300px;
padding: 50px;
border: 20px solid #0088dd;}
p.example {
margin: 10px auto 10px auto;
text-align: left;}
</style>
</head>
<body>
<p>Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.</p>
<p class="example">Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.</p>
</body>
</html>
12.内联元素与块级元素的转换
display:
inline使一个块级元素表现的像一个内联元素
block使一个内联元素表现的像一个块级元素
inline-block使一个块级元素像内联元素那样浮动并保持其他的块级元素特征
none将元素从页面上隐藏
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
li {
display: inline;
margin-right: 10px;}
li.coming-soon {
display: none;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Products</li>
<li class="coming-soon">Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
13.盒子的隐藏
visibility:
hidden用于隐藏元素。如果一个元素的visibility属性值被设置为hidden，元素的位置会显示空白。visibility:占据位置。display:none不占据位置。
visible用于显示元素。show显示元素。
14.边框图像
border-image
该属性需要三种信息：
（1）图片的url
(2)切割图片的位置
(3)如何处理直边。stretch伸展图片，repeat重复图片，round类似于repeat，如果重复图片遇到边界不合适会动态调节大小。
<!DOCTYPE html>
<html>
<head>
<title>Border Image</title>
<style type="text/css">
p {
width: 197px;
height: 54px;
border: 11px solid #ffffff;}
p.one {
-moz-border-image: url("images/dots.gif") 11 11 11 11 stretch;
-webkit-border-image: url("images/dots.gif") 11 11 11 11 stretch;
border-image: url("images/dots.gif") 11 11 11 11 stretch;}
p.two {
-moz-border-image: url("images/dots.gif") 11 11 11 11 round;
-webkit-border-image: url("images/dots.gif") 11 11 11 11 round;
border-image: url("images/dots.gif") 11 11 11 11 round;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
</body>
</html>
15.盒子的投影
box-shadow
水平偏移：负值表示将阴影置于盒子的左侧。
垂直偏移：负值将阴影置于盒子上方
模糊距离：省略该值，阴影会显式为实边，就像边框一样
阴影扩展：如果使用该值，正值会使阴影向四周延伸，负值会使阴影收缩。
inset:创建内部阴影
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: #e1ddda;
margin: 20px;
display: inline-block;}
p.one {
-moz-box-shadow: -5px -5px #777777;
-webkit-box-shadow: -5px -5px #777777;
box-shadow: -5px -5px #777777;}
p.two {
-moz-box-shadow: 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px #777777;
box-shadow: 5px 5px 5px #777777;}
p.three {
-moz-box-shadow: 5px 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px 5px #777777;
box-shadow: 5px 5px 5px 5px #777777;}
p.four {
-moz-box-shadow: 0 0 10px #777777;
-webkit-box-shadow: 0 0 10px #777777;
box-shadow: 0 0 10px #777777;}
p.five {
-moz-box-shadow: inset 0 0 10px #777777;
-webkit-box-shadow: inset 0 0 10px #777777;
box-shadow: inset 0 0 10px #777777;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<br />
<p class="four"></p>
<p class="five"></p>
</body>
</html>
16.圆角border-radius
可以使用以下属性：
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-raidus
<!DOCTYPE html>
<html>
<head>
<title>Border Radius</title>
<style type="text/css">
p {
border: 5px solid #ee3e80;
padding: 20px;
width: 275px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
</style>
</head>
<body>
<p>Pet Sounds featured a number of unconventional instruments such as bicycle bells, buzzing organs, harpsichords, flutes, Electro-Theremin, dog whistles, trains, Hawaiian-sounding string instruments, Coca-Cola cans and barking dogs.</p>
</body>
</html>
17.椭圆角
border-top-left-radis:80px 50px;
<!DOCTYPE html>
<html>
<head>
<title>Elliptical Shapes</title>
<style type="text/css">
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;}
p.one {
border-top-left-radius: 80px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
p.two {
border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;}
p.three {
padding: 0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
</html>
17.布局小技巧
1.行内元素，行内块元素，可以被父元素当成文字处理。
即可以像处理文本一样去处理行内元素行内块元素在父元素中的对齐。
例如：text-align line-height text-indent等
2.如何让子元素在父亲中水平居中。
（1）若子元素为块元素。给父元素加上：margin:0 auto
(2)若子元素为行内元素或行内块元素。给父元素加上：text-align:center
3.如何让子元素，在父亲中垂直居中
（1）若子元素为块元素，给子元素加上margin-top,值为（父元素content-子元素盒子总高）/2
(2)若子元素为行内元素或行内块元素，
让父元素加上line-height:height 每个子元素加上vertical-align:middle;
若要绝对垂直居中，父元素font-size:0px;
18.元素之间的空白问题
元素之间的回车变成空格。解决方法：父元素的Font-size设为0，给每个子元素单独设置font-size
19.行内块的幽灵空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本底部是有一定距离的
解决方案：（1）行内块设置vertical-align:bottom,top,middle不能是baseline
（2）若父元素只有一张图片img{display:block}
(3)父元素设置font-size:0px；
CSS Outline
An outline is a line drawn outside the element's border.
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
CSS Outline Width
The outline-width property specifies the width of the outline, and can have one of the following values:
thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
The outline property is a shorthand property for setting the following individual outline properties:
outline-width
outline-style (required)
outline-color
The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
| inline | Displays an element as an inline element | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Displays an element as a block element | |||||||||||||||||||||||
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |||||||||||||||||||||||
| flex | Displays an element as a block-level flex container | |||||||||||||||||||||||
| grid | Displays an element as a block-level grid container | |||||||||||||||||||||||
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |||||||||||||||||||||||
| inline-flex | Displays an element as an inline-level flex container | |||||||||||||||||||||||
| inline-grid | Displays an element as an inline-level grid container | |||||||||||||||||||||||
| inline-table | The element is displayed as an inline-level table | |||||||||||||||||||||||
| list-item | Let the element behave like a |
|||||||||||||||||||||||
| run-in | Displays an element as either block or inline, depending on context | |||||||||||||||||||||||
| table | Let the element behave like a elementelement element element elementelement element
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout: |
浙公网安备 33010602011771号