前端开发之css

<!--
页面中的组成部分
通常随便打开一个网页，有文字，图片，视频，表格，音频，表单（注册信息)

css 属性/尺寸/边框/背景

1.css的尺寸属性，就是大小
width max-width min-width
height max-height min-height

2.css的边框属性
border-style 边框风格
            none:无边框。 border-color和boder-width都将被忽略
            hidden:隐藏边框。
            dotted:点状边框。
            dashed:虚线边框。
            solid:实线边框。
            double:双线边框。两条单线与其间隔的和等于指定的border-width的值。
            groove:3D凹槽轮廓。
            ridge:3D凸槽轮廓。
            inset:3D凹边轮廓。
            outset:3D凸边轮廓。

border-color 边框颜色
border-width 边框宽度


3.内边距属性
padding-left: 20px; 左边距
padding-top: 50px;  上边距
padding-right: 100px;右边距
padding-bottom: 150px;下边距

/*复合属性*/
padding: 值； 上下左右

/*padding: 20px;*/
/*padding: 20px 40px;*/   上下 左右
/*padding: 20px 40px 60px;*/  上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左


4.css背景属性



-->




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>张仁国杨静结婚啦</title>
    <style type="text/css">
        .item {
            /*设置元素的宽高*/
            /*width: 300px;*/
            /*max-width: 300px;*/
            /*min-width: 300px;*/
            width: 600px;
            /*height: 400px;*/
            /**/

            /*border 边框*/

            border-style: solid;
            border-color: #f90;
            border-width: 1px;

            /*复合属性*/
            /*border: 2px solid red;*/



            /*内边距  padding*/
            padding-left: 20px;
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;

            /*复合属性*/
            /*padding: 20px;*/
            /*padding: 20px 40px;*/
            /*padding: 20px 40px 60px;*/
            padding: 10px 20px 30px 40px;


        }

    </style>
</head>
<body>
    <h1>CSS的尺寸属性 边框属性 内边距</h1>
    <hr>


    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam consectetur corporis dolorum, earum eos et explicabo fuga harum id itaque maiores nam nobis possimus quasi ratione suscipit totam vitae?
    </div>

</body>
</html>
猜你喜欢
