静态网页开发_CSS的20-80关键知识

1.css的基础写法

.name{
  backround:white;
  height:50px;
}

.name{}:样式选择器

<div class="name"></div>

#number{}:ID选择器

<div id="number"></div>

div{}:元素选择器

<div id="52"></div>        <!--√-->
<p id="52"></p>            <!--×-->

{}中的内容:声明

background/height:属性

white/50px:值

2.CSS的盒模型

(1)content与border

%title插图%num

(2)padding与margin

%title插图%num

%title插图%num

3.盒模型例子

.block-1{

    border: solid 2px blue;     /*分号一定要有*/

    margin-bottom: 20px;        /*margin属性的应用*/

    padding: 0 0 0 20px;        /*上 右 下 左*/

    box-sizing: border-box;     /*设置盒子宽高时记得加上这句:box-sizing:border-box;*/

    width: 64px;

    height: 64px;

    background: yellow;         /*solid:边的样式是实心,2px指这个边有多粗,blue是颜色*/

}



.block-2{

    border: solid 2px blue;

    margin-bottom: 20px;        /*margin-bottom:让其下部推开20px的距离,px即像素*/

    padding: 0 0 0 20px;

    box-sizing: border-box;

    width: 128px;

    height: 64px;

    background: red;

}



.block-3{

    border: solid 2px blue;

    margin-bottom: 20px;

    padding: 0 0 0 20px;

    box-sizing: border-box;

    width: 192px;

    height: 64px;

    background: green;

}

/*CSS中使用/*......*/添加注释*/
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇