css样式表-margin 外边距/border 边框/border-radius 圆角/padding 边框

时间 2019-11-20 标签 css 样式 margin 边距 border 边框 radius 圆角 padding

css样式表（二）

css盒模型

<!DOCTYPE html>

<html>

<head>

.div{width: 100px;

height: 100px;

/*[margin 外边距]

margin属性值最多有四个：

①写一个值：四个方向的margin均为这个值

②写两个值：上、右两个方向，下默认=上，左默认=右

③写三个值：上、右、下三个方向，左默认=右

④写四个值：上、右、下、左四个方向

⑤写三个值：+auto：控件居右显示

margin：50px 30px 20px auto; 距离父右侧 30px

⑥margin：0 auto；设置控件在父容器中，水平居中

/*给子元素加margin-top时，会致使父容器与子容器一下往下，处理方法之一是，给父容器加overflow: hidden;*/

margin:0px auto;

/*[border 边框]

border 有三个元素：颜色color 样式style 宽度width

原则上，三个属性都须要手动制定（color不写，默认为黑色）

* */

/* [border-radius 圆角]

* 一、能够接受8个属性值： X轴(左上、右上、右下、左下)/Y轴

* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

* 二、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角

* 例如：border-radius: 50px 0px ;

* =border-radius: 50px 0px 50px 0px;

* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;

* 三、只写一个数，默认8个值均相等。

border: 10px solid green;

/*[padding 边框]

使用方式，同margin①~④

注意：使用padding 会将整个控件撑大，使用时须要注意控件可视区域的实际大小

* */

/* [box-shadow 盒子阴影]

* 一、六个属性值，空格分割：

* x轴阴影距离：(必选) 可正可负，正——右移负——左移

* y轴阴影距离：(必选) 可正可负，正——下移负——上移

* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊

* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减少，阴影缩小

* 阴影颜色：(可选) 默认为黑色

* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影

box-shadow: 0px 0px 10px 0px white inset;

}

.div2{padding: 10px 10px 10px 10px;

width: 100px;

height: 100px;

border: 10px solid green;}

.div3{width: 270px; height: 200px;

border: 3px #F1B562 solid;

}

ul{list-style: none;

text-indent: -20px;

line-height: 30px;}

#span2{

margin-right: 16px;

}

</style>

</head>

<body>

这是div中的文字</div>

这是div中的文字</div>

<ul>

</ul>

</div>

</body>

</html>

图片以下：

案例练习：

<!DOCTYPE html>

<html>

<head>

#div1{

width: 150px;

height:450px;}

li {float: left;

width:12px;

height: 30px;

line-height: 30px;

list-style: none;

}

#div2{width: 120px;

height: 60px;

margin: 0px auto;

border-bottom: 2px #B3B3B3 solid;}

#li2{white-space: nowrap;

height: 50px;width: 55px;line-height: 10px;

margin-top: 5px;color: #B3B3B3;

}

#li1{background: url(css/3-13-练习.png);

background-repeat: no-repeat;

width: 55px;height: 60px;

background-position: -90px 5px;

}

p{color: black;}

#div3{font-size: 12px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div><div id="div2">

</div>

</body>

</html>

图以下：

案例-02

<!DOCTYPE html>

<html>

<head>

img{height: 200px;

width:200px;border: 6px #FF8C00 solid;}

#img1{border-radius: 53px 0px;}

#img2{border-radius: 103px 100px;}

#img3{height: 0px;

width: 1px;

padding: 50px;

border: 50px #F3C17E solid;

border-radius:100px;}

</style>

</head>

<body>

</body>

</html>

图以下：

阴影：

解析课后练习

图以下：

代码以下：

01-

<!DOCTYPE html>

<html>

<head>

.div1{width: 800px;

height:80px;

color: white;}

div div .li{float: right;

width: 100px;

margin: 20px 6px;

text-align: center;

line-height: 40px;

list-style: none;

border: 2px solid #8B9CBC;

font-weight: bold;}

.div2{float: left;line-height:30px;text-indent: 40px;}

</style>

</head>

<body>

<li class="li">后置双摄像</li>

</ul></div>

</div>

</body>

</html>

02-

<!DOCTYPE html>

<html>

<head>

#div1{width: 410px;

height: 450px;

overflow: hidden;}

#div2{width: 390px;

margin:30px 20px;

border-bottom: 2px #DDDDDD solid;

}

#div2 span{color: red;}

#div3{float: right

}

#div4{

height: 380px;

width: 410px;

overflow: hidden;}

#div5{border-bottom: 2px #DDDDDD solid;

width: 390px;height: 50px;

overflow: hidden;

}

#div5 ul {list-style: none;

width: 260px;

margin-left: 5px;

overflow: hidden;

}

#div5 ul #li1{

width: 74px;

float: left;

}

#div5 ul #li2{float: left;

width: 150px;margin-left: 5px ;

}

#div5:hover{

border-left: 2px #FF0000 solid;

color: #FF0000;

width: 388px;}

#div5:hover #li1{border-bottom: 2px #FF0000 solid;

}

#div5:hover #li2{border-bottom: 2px #FF0000 solid;

}

</style>

</head>

<body>

MORE+

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗滤器按期防水</li>

</ul>

</div>

</body>

</html>

03-

<!DOCTYPE html>

<html>

<head>

.a{width: 800px;height: 800px;overflow: hidden;}

.b{width: 200px;height: 400px;margin-left: 205px;margin-top: 5px;float: left;}

.c{width: 200px;height: 400px;margin-top: 5px;float: left;}

.d{width: 190px;height: 200px;;margin-top: 5px;float: left;}

.e{width: 190px;height: 200px;float: left;}

.f{width: 400px;height: 390px;float: left;margin-left: 205px;float: left}

.g{width: 190px;height: 200px;float: left;}

.h{width: 190px;height: 190px;float: left;}

</style>

</head>

</div>

</body>

</html>

学习新知识

css样式表（二）：

/*[border-image 图片边框]

* 一、十个属性：

* ① 图片路径：url()

* ② 图片切片宽度：4个值，分别表明上、右、下、左，四条切线。经过四条切线切割后，会把图片分红九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。

* 写的时候，不能带px单位

* ③ 图片边框的宽度：4个值，分别表明上、右、下、左四条边框

* 写的时候，必须带px单位

* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)

* 【铺满和平铺区别】

* 平铺：会保持原有四条边的宽度，进行平铺。可能致使角落处没法显示完整一个图标；

* 铺满：会对四条边进行适当的拉伸压缩，确保能够正好显示彻底。

* 二、属性值写法：border-image: ① ②/③px ④;

* 第②部分能够只写1个、2个、3个，判断方式同margin

新知识-

3-14-CSS样式表（三）

/*[相对定位relative]

* 1.使用position：relativw；设置元素为相对定位的元素

* 2.定位机制：

* ①相对于本身原来文档流中的位置定位，当不制定TOP等定位值时，不会改变元素位置

* ②相对定位元素，仍会站间距原有文档流中的位置，而不会释放。

* 3.使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。

/*[absolute绝对定位]

* 一、使用position：absolute；这是元素为绝对定位元素

* 二、定位机制：

* ①相对于第一个非static的祖先元素（即便用了relative/absolute/fixed定位的祖先元素）进行定位；

* ②若是祖先元素均为定制，相对于浏览器浏览器左上角定位；

* ③使用absolute的元素，会从文档六中彻底删除，原有控件释放再也不占有

/*[固定定位fixed]

* 一、position：fixed；是一种特殊的绝对定位，夫荣妻贵无妨使用relative锁住

* 二、定位机制：永远相对于浏览器定位

/*[z-indexs 属性]

* 1.做用：设置定位元素的Z轴层叠顺序

* 2.使用要求： ①必须是定位元素才能使用。relative/absolute/fixed

* ②使用z-index须要考虑父容器的约束。

若是父容器为z-inex，则子容器的z-index能够不受父容器的约束；

若是父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一父容器的不一样子元素，仍能够经过的本身的z-index调整层叠关系）

* 3.z-index：auto & z-index：0的异同

* ①z-index：auto为默认值，与z-index：0处于同一层面

* ②z-index：auto，不会约束子元素的z-index层次，而z-index：0，会约束子元素必须与福元素处于同一平面

* 4.z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上

* */

新知识：

display属性 - none：隐藏元素，元素所占空间释放

- block ：设为块级元素

- inline ：设为内联元素（行级元素）

- inline-block ：设为内联块级元素（自己为行级元素，可是具备会计元素所特有的各类属性，好比，宽、高、text-align等）

课后做业：

新知识：

display属性 - none：隐藏元素，元素所占空间释放

- block ：设为块级元素

- inline ：设为内联元素（行级元素）

- inline-block ：设为内联块级元素（自己为行级元素，可是具备会计元素所特有的各类属性，好比，宽、高、text-align等）

学习新知识：

1、过渡、变换

<!DOCTYPE html>

<html>

<head>

/*transform定义变换

* 经常使用变换：translate 平移

* scale缩放

* rotale定义旋转(Z轴 2D平面转 x-翻转 y-翻转)

* transform可同时进行多种变换，多种变换之间空格分隔

* 例如：transform：scale（1.8,3.0） translatey（0px）

*transform-origin：定义变形起点

* 可选值：left/center/tight left/center/tight

* 或者，直接写X Y 轴坐标点

* 例如：transform：rotate（180deg）：

* transform-origin：right bottom；

* 表示，绕左下角，旋转180度

/*transtion属性：定义过渡

* ⒈参与过渡的属性，能够单独制定某个CSS属性，也能够all/none

* ⒉过渡开始到过渡结束时间： .3S .5S

* ⒊过渡的样式行数常选 ease

* ⒋过渡开始前的延迟时间，能够省略。

*transition 属性能够同时定义多个属性，用逗号分隔

* transition：标签 .3s ease（由快到慢的样式）

#div1{width: 300px;

height: 300px;

overflow: hidden;

}

#div1 img{width: 100px;

height: 100px;

transition: all 3s ease;}

div:hover img{transform:scale(2) translate(40px,20px) rotateY(180deg);

transform-origin: left top}

</style>

</head>

<body>

</div>

</body>

</html>

2、动画

<!DOCTYPE html>

<html>

<head>

#div1{width: 300px;

height: 300px;

-webkit-animation: mymymy 5s ease 3s infinite}

/*CSS3 动画的使用

1.声明一个动画（关键帧）

@-webkit-keyframes name{

from{}

to{}

阶段：

⒈.每一个阶段必须用百分比表示，从0%到100%

⒉.起点必须设置即0%到100%或者from和to

二、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧

【Animation:缩写顺序】

Animation-name 动画名称(@keyframes 名称)

Animation-duration 动画持续时间

Animtaion-timing-function动画速度曲线常选ease

Animtaion-delay 动画延迟时间

Animation-iteration-count 播放次数，默认为1，无限次Infinite

Animation-direction 设置对象动画在循环中是否反向运动（ Alternate 逆向播放）

* animation-fill-mode 设置对象动画时间以外的状态（forwards：停留在动画结束状态 backwards:停留在动画开始状态）

>>> 注意animation-name和animation-duration必须设置

>>> animation能够同时设置多个动画动画之间用,分隔

animation:frame1 .3s,frame2 .5s……

@-webkit-keyframes mymymy{

0%{}

25%{}

50%{ line-height: 1.75;"> 75%{background-color: whitesmoke}

100%{ line-height: 1.75;"> }

</style>

</head>

<body>

</div>

</body>

</html>

开始个人制做网页之旅：

临摹宾之郎guanwang

官网：

我作的：

代码：

<!DOCTYPE html>

<html>

<head>

<title>用心作好没口槟榔_宾之郎</title>

</head>

<body>

<!--

Head部分

-->

</li>

<li>

<a href="#">走进宾之郎</a>

<ul>

</ul>

</li>

<li>

<a href="#">聚焦宾之郎</a>

</li>

<li>

<a href="#">品味宾之郎</a>

</li>

<li>

<a href="#">加盟宾之郎</a>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

</ul>

</div>

</header>

您的浏览器不支持video标签

</video>

</div>

</section>

<p>走进宾之郎</p> </div>

</div>

<p>湖南宾之郎食品科技有限公司位于湖南▪湘潭-九华经济技术开发区。是目前槟榔食品行业惟一一家实现全自动工艺生产流水线的现代化槟榔食品科技生产企业。</p>

</div>

发展历程

</div>

公司概况</div>

</div>

<div class="right1"> <img src="img/ae0d63505960476eb59817808cc97a84.jpg"/> <div>印象宾之郎</div> </div>

</div>

</div> </div>

</section>

</body>

</html>