1、尺寸样式:
1.height
2.width
3.max-height
4.max-width
5.min-height
6.min-width
div{
width: 100%;
height: 200px;
background: #888;
max-width: 500px;
}
min-width: 500px;
2、textarea样式:
resize:none;
textarea{
width: 500px;
height: 100px;
resize: none;
}
</style>
</head>
<body>
<p>留言</p>
<textarea></textarea>
</body>
3、样式继承:
1.字体样式
2.文本样式
div{
color: #00f;
font-size: 30px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
letter-spacing: 20px;
word-spacing: 10px;
/*text-align: center;*/
text-indent: 100px;
line-height: 300px;
}
4、表格样式:
1.表格合并
border-collapse:collapse;
2.表格空隙
border-spacing:10px;
table{
border-spacing:20px;/*表格空隙*/
/*border-collapse:collapse;*/
}
</style>
</head>
<body>
<table width='700px' border='1px'>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
<tr>
<td>1</td>
<td>user1</td>
<td>123</td>
</tr>
</table>
</body>
table{
border-collapse:collapse;/*表格合并*/
}
表格样式
table{
border-collapse:collapse;
width:700px;
height:400px;
margin:0 auto;
}
td,th{
border:1px solid #00f;
text-align:center;
}
td{
vertical-align:bottom;
}
5、滚动条样式:
overflow:hidden|auto|scroll
overflow-x
overflow-y
div{
width: 100px;
height: 300px;
background: #888;
color: #f00;
/*overflow: auto;自动加滚动条*/
/*overflow: hidden;隐藏多余的*/
overflow-x: scroll;/*出现滚动条*/
overflow-y: hidden;/*隐藏滚动条*/
}
</style>
</head>
<body>
<div>
<p>吃鸡吗?????????????????????????????</p>
<p>吃鸡吗?????????????????????????????</p>
<p>吃鸡吗?????????????????????????????</p>
<p>吃鸡吗?????????????????????????????</p>
<p>吃鸡吗?????????????????????????????</p>
<p>吃鸡吗?????????????????????????????</p>
</div>
6、显示和隐藏:
display:none|block|inline
visibility:visible|hidden
display和visibility区别:
1.display:none不占位隐藏
2.visibility:hidden占位隐藏
div{
width: 100px;
height: 300px;
background: #888;
color: #f00;
/*display: none;不占位隐藏*/
visibility: hidden;/*占位隐藏*/
}
visibility显示与隐藏
<style>
*{
font-family: 微软雅黑;
}
.hcls{
background: #888;
}
.hcls2{
background: #f0f;
}
</style>
<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
<h1>display显示和隐藏</h1>
<span class='hcls'>aaaaaaaaaaaaaaaaaaaaa</span>
<span class='hcls2'>bbbbbbbbbbbbbbbbbbbbb</span>
<br>
<br>
<button class='show'>显示</button>
<button class='hidden'>隐藏</button>
</body>
<script>
$('.show').click(function(){
$('.hcls').css({'visibility':'visible'});
});
$('.hidden').click(function(){
$('.hcls').css({'visibility':'hidden'});
});
</script>
7、外边距:
margin-left:10px;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
外边距缩写:
margin:10px; 四个边同时
margin:10px 20px; 上下左右
margin:10px 20px 30px; 上左右下
margin:10px 20px 30px 40px; 上右下左
.div1{
width:100px;
height:100px;
background: #00f;
margin-left:150px;
margin-top:150px;
margin-bottom:100px;
}
.div2{
width:100px;
height:100px;
background: #f00;
margin-left:100px;
}
</style>
<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
<div class='div1'>
</div>
<div class="div2">
</div>
8、内边距:
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
内边距缩写:
padding:10px; 四个边同时
padding:10px 20px; 上下左右
padding:10px 20px 30px; 上左右下
padding:10px 20px 30px 40px; 上右下左
.div1{
width:100px;
height:100px;
background: #00f;
padding-left: 50px;
padding-top: 50px;
}
9、块标签距中:
margin:0px auto;
.div1{
width:100px;
height:100px;
background: #00f;
margin: 0px auto;
}
body与生俱来的外边距
body{
margin:0px;
}
ul{
padding-left: 0px;
margin:0px;
}
</style>
</head>
<body>
<ul>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</body>
1、