<!--
页面中的组成部分
通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息)
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>
前端开发之css
原文地址:https://www.cnblogs.com/zhangrenguo/p/10080934.html