前端——CSS（2）

最新推荐文章于 2022-10-02 10:43:22 发布
lemon100521
最新推荐文章于 2022-10-02 10:43:22 发布
阅读量249
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/qq_40409115/article/details/80787968
版权
前端专栏收录该内容
5 篇文章 0 订阅
订阅专栏
<!-- 
九、CSS列表
    列表类型list-style-type:改变列表的标志
十、CSS表格
    border：表格边框
    border-collapse：折叠边框
    width,height:设置表格宽和高
    text-align:水平对齐方式
    vertical-align：垂直对齐（顶部，中部，底部）
    padding:表格内边距,内容到边框
    表格颜色：background:背景色，color：字体颜色

十一、CSS轮廓：
    绘制与元素周围的一条线，位于边框的外围，起到突出元素的作用
    outline:属性规定轮廓的样式style、颜色color、宽度width
十二、CSS盒模型
     规定元素框处理元素内容、内边距、外边距、及百年狂的处理方式
     1.内边距、外边距默认0
     2.CSS背景应用：元素内容+内边距+边框组成的区域
     3.许多元素在不同的浏览器下可能会有不同的内外边距 ，
     若想要该元素在所有游览器中内外边距都为0，可以使用通用选择器设置如下
        *{
	      padding：0；
	      margin：0；
        }   
     4.在CSS指定的width和height指的是内容的宽和高，增加或减少内外边距的不会影响内容区域的大小
  
  内边距：padding属性设置内边距，可以设置像素值、百分比，但不允许负值。
         上下内边距的为宽的

  元素边框：border样式、宽度、颜色
  边框和背景：边框样式：border-style：none无边框 dotted点状边框    
  边框宽度：border-width 
        一旦将border的style设置为none，则此元素无边框的任何属性，即使设置也没用
  外边距：margin接受所有的长度单位
         auto：默认 
    值复制：如果缺少左边距的值，则使用右边距的值
           如果缺少下边距，则使用上边距的值
           如果缺少右边距，则使用上边距的值  
  外边距合并
     当两个处置外边距相遇时，他们合并成一个外边距

盒模型与display属性
   两种基本的盒模型
       bolck（块级元素）：这种盒模型组件默认占据一行，允许通过CSS设置其宽度、高度
       inline（内联元素）：这种盒模型组件不会占据一行，一行中可以放置多个组件，即使使用CSS设置宽度。高度也不会起作用<span../> <a../><img../>
   dispaly属性：（inline、block）可以改变盒模型    
   none值：设置目标对象隐藏，该对象占用的页面空间也会释放
   visibility：（hidden，visiable）设置为hiden该元素不可见，但是占用的页面空间还会保留。

inline-block盒模型：
    多个组件并列显示，仍然可以通过width和height设置宽和高
    可实现多栏布局、水平导航菜单
inline-table盒模型：
    默认情况下，table属于block类型，table左右两边不允许出现其他内容
    CSS为table提供inline-table：允许通过width和height设置宽度与高度，并且允许table元素左右两边出现掐腰内容   
    垂直方向对其：vertical-align：bottom/top底端或顶端对齐
    可将组件变为表格
list-item盒模型：
    list-item可以将目标组件转换为类似于<ul../>列表   
-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- <style type="text/css">
		ul.circle{
			list-style-type: circle;
		}
		ol.squre{
			list-style-type: square;
		}
		ol.lower-alpha{
			list-style-type: lower-alpha;
		}
	</style> -->

	<!-- <style type="text/css">
	    table{
	    	width: 100%;
	    	border-collapse: collapse;
	    }
	    th{
	    	height: 50px;
	    	background-color: blueviolet;
	    	color: aliceblue;
	    }
	    td{
	    	height: 50%;
	    	text-align: center right;
	    	vertical-align: bottom;
	    	padding: 15px;
	    }
		table,th,td{
			border: 1px solid blue 
		}
	</style> -->


	<!-- <style type="text/css">
		#customers{
			font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
			width: 100%;
			border-collapse: collapse;
		}
		#customers td,#customers th{
			font-size: 1em;
			border: 1px solid #98bf21;
			padding:3px 7px 2px 7px;
		}
		#customers th{
			font-size: 1.1em;
			text-align: left;
			padding-top: 5px;
			padding-bottom: 4px;
			background-color: #A7C942;
			color: #ffffff;
		}
		#customers tr.alt td{
			color: #000000;
			background-color: #EAF203;
		}
	</style> -->



	<!-- <style type="text/css">
		p{
			border: black solid thin;
			outline: blue dotted thick;
		}
	</style> -->



	<!-- <style type="text/css">
		h1{
			border: 1px solid ;
			/*padding: 10px;*/
			padding-top: 10px 0.25em 2ex 20%;
			padding-top: 10px;
			padding-right: 0.25em;
			padding-bottom: 2ex;
			padding-left: 20%;
		}
	</style> -->



	<!-- <style type="text/css">
		p.dotted{
			border-style: dotted;
		}
		p.dashed{
			border-style: dashed;
		}
		p.solid{
			border-style: solid;
		}
		p.groove{
			border-color: green;
			border-style: groove;
		}
		p.ridge{
			border-style: ridge;
		}
		p.inset{
			border-style: inset;
		}
		p.outset{
			border-style: outset;
		}
		img{
			border-style: outset;
		}
	</style> -->



	<!-- <style type="text/css">
		p{
			border-style: solid  dotted dashed ridge;
		}
	</style> -->



	<!-- <style type="text/css">
		p{
			border-style: solid;
			border-width: thick;
		}
	</style> -->

	<!-- <style type="text/css">
		p{
			border-style: none;
			border-width: 50px
		}
	</style> -->

	<!-- <style type="text/css">
		p{
			border-style: solid;
			border-color: blue red;
		}
	</style> -->


	<!-- <style type="text/css">
		a:link,a:visited{
			border-style: solid;
			border-width: 5px;
			border-color: transparent;
		}
		a：hover{
			border-color: green;
		}
	</style> -->


	<!-- <style type="text/css">
		p#1{
			margin: 10px 20px;
		}
		p#2{
			margin: 20px 10px;
		}
	</style> -->

	<!-- <style type="text/css">
		div,span{
			width: 300px;
			height: 40px;
			border: 1px solid black;
		}
	</style> -->


	<!-- <style type="text/css">
		span{
			width: 300px;
			height: 40px;
			border: 1px solid black;
			display: inline;
		}
		span{
			width: 300px;
			height: 40px;
			border: 1px solid black;
			display: block;
		}
	</style> -->


	<!-- <style type="text/css">
		div{
			width: 300px;
			height: 40px;
			background-color: #dddddd;
			border:2px solid black;
		}
	</style> -->



	<!-- <style type="text/css">
		body{
			margin: 0px;
		}
		div#container{
			width: 960px;
			margin: auto;
		}
		div>div{
			border: 1px solid #aaaaff；
			display:inline-block;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			border-radius: 12px 12px 0px 0px;
			padding:5px;
		}
	</style>
 -->

	<!-- <style type="text/css">
		body>div{
			text-align:center;
			margin: auto;
		}
		div>div{
			display: inline-block;
			border:1px solid black;
		}
		a{
			text-decoration: none;
			display:block; 
			width: 120px;
			padding:10px;
			background-color: #eee;
		}
		a:hover{
			background-color: #aaa;
			font-weight: bold;
		}
	</style> -->



	<!-- <style type="text/css">
		td{
			border: 1px solid black;
		}
		table{
			width: 360px;
			border-collapse: collapse;
			display: inline-table;
			vertical-align: top;
		}
	</style> -->

<!-- 利用div元素画表格 -->
	<!-- <style type="text/css">
		div>div{
			display: table-row;
			padding: 10px;
		}
		div>div>div{
			display: table-cell;
			border:1px solid black;
		}
	</style> -->



	<!-- <style type="text/css">
		div{
			display: list-item;
			list-style-type: square;
			margin-left: 10px
		}
	</style> -->


	<!-- <style type="text/css">
		body>div{
			display: list-item;
			list-style-type: disc;
			margin-left: 20px
		}
		div>div{
			display: list-item;
			list-style-type: square;
			margin-left: 40px;
		}
	</style> -->


	<!-- <style type="text/css">
		body{
			margin: 0px;
		}
		div#container{
			width: 960px;
			margin:auto;
		}
		div>div{
			border: 1px solid #aaf;
			box-sizing: border-box;
			border-radius: 12px 12px 0px 0px;
			background-color: #ffc;
			padding: 5px
		}
	</style> -->



	<!-- <style type="text/css">
		div>div{
			width: 220px;
			padding:5px;
			margin: 2px;
			float: left;
			background-color: #ddd;
		}
	</style> -->



	<style type="text/css">
		div{
			width: 300px;
			height: 70px;
			white-space: nowrap;
			border: 1px solid black;
			margin: 15px;
		}
	</style>
</head>
<body>
	<!-- <ul class="circle">
		<li>java从入门到精通</li>
		<li>java从入门到放弃</li>
	</ul>
	<ol class="square">
		<li>sqqq</li>
		<li>daS</li>
	</ol>
	<ol class="lower-alpha">
		<li>sqqq</li>
		<li>daS</li>
	</ol> -->


	<!-- <table>
		<tr>
			<th>
				基础
			</th>
			<th>
				进阶
			</th>
		</tr>
		<tr>
			<td>java</td>
			<td>c语言</td>
		</tr>
		<tr>
			<td>java进阶</td>
			<td>c语言进阶</td>
		</tr>
	</table> -->



	<!-- <table id="customers">
		<tr>
			<th>Company</th>
			<th>Contact</th>
			<th>Country</th>
		</tr>
		<tr class="alt">
			<th>Baidu</th>
			<th>Li YanHong</th>
			<th>China</th>
		</tr>
		<tr>
			<td>Goole</td>
			<td>Larry Page</td>
			<td>USA</td>
		</tr>
		<tr class="alt">
			<td>Lenovo</td>
			<td>Liu ChuanZhi</td>
			<td>China</td>
		</tr>
		<tr>
			<td>llll</td>
			<td>weq</td>
			<td>qqw</td>
		</tr>

		<tr class="alt">
			<td>dA</td>
			<td>XL</td>
			<td>YY</td>
		</tr>

	</table> -->


	<!-- <p>gvhbjknkml,;.fcghvjbknlm;,</p> -->


	<!-- <h1>h1标签</h1> -->

	<!-- <p class="dotted">段落</p>
	<p class="dashed">段落</p>
	<p class="solid">段落</p>
	<p class="groove">段落</p>
	<p class="ridge">段落</p>
	<p class="inset">段落</p>
	<p class="outset">段落</p>
	<img src="longmao.gif"> -->


	<!-- <p>段落</p> -->

	<!-- <a href="#">点我！！</a> -->

	<!-- <p id="1">段落1</p>
	<p id="2">段落2</p>-->


	<!-- <div>div1</div>
	<div>div2</div>
	<span>span1</span>
	<span>span2</span> -->


	<!-- <input type="button" value="隐藏"
	οnclick="document.getElementById('test1').style.display='none';" />
	<input type="button" value="提示" οnclick="document.getElementById('test1').style.display='';"/>
	<div id="test1">
		使用display属性控制元素的可见与否
	</div>
	<hr>

	<input type="button" value="隐藏"
	οnclick="document.getElementById('test2').style.visibility='hidden';" />
	<input type="button" value="提示" οnclick="document.getElementById('test2').style.visibility='visible';"/>
	<div id="test2">
		使用visibility属性控制元素的可见与否
	</div>
	<hr> -->


	<!-- <div id="container">
		<div style="width: 200px">div1</div>
		<div style="width:500px">div2</div>
		<div style="width: 200px">div3</div>
	</div> -->


	<!-- <div>
		<div>
			<a href="#">前端从入门到精通</a>
		</div>
		<div>
			<a href="#">HTML从入门到精通</a>
		</div>
		<div>
			<a href="#">JS从入门到精通</a>
		</div>
	</div> -->


    <!-- 前面内容
	<table>
		<tr>
			<td>javaSE</td>
			<td>java se thread</td>
		</tr>
		<tr>
			<td>javaee</td>
			<td>iavaee spring</td>
		</tr>
	</table>
	后面内容 -->



	<!-- <div style="display: table;width: 400px">
		<div style="display: table-caption;">java课程体系</div>
		<div>
			<div>javase</div>
			<div>thread</div>
		</div>
		<div>
			<div>javaee</div>
			<div>spring</div>
		</div>
	</div> -->



	<!-- <div>javase</div>
	<div>javaee</div>
	<div>javascript</div> -->


	<!-- <div>
		javase课程
		<div>javasete=gread</div>
		<div>javasesss</div>
	</div>
	<div>
		javaee课程
		<div>javaee spring</div>
		<div>javaee springmvc</div>
		<div>javaee springboots</div>
	</div> -->



	<!-- <div id="container">
		<div style="float: left;width: 220px">
			<h2>javase课程体系</h2>
			<ul>
				<li>l</li>
				<li>2</li>
				<li>li</li>
			</ul>
		</div>
		<div style="float: left;width: 500px">
			<h2>javaee课程</h2>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		<div style="float: left;width: 240px">
			<h2>javascript课程</h2>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</div> -->




<!-- <div>
	<div>1</div>
	换行
	<div style="clear: both;">2</div>
	<div>3</div>
	<div>4</div>
</div>  -->
进度条
<div>
<h3>
	不设置overflow属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>

<div style="overflow: hidden;">
	<h3>
		设置overflow属性
	</h3>
	测试文字测试文字测试文字测试文字测试文字测试文字
</div>

<div style="overflow-x: hidden;">
	<h3>
		设置overflow-x属性
	</h3>
	测试文字测试文字测试文字测试文字测试文字测试文字
</div>

<div  style="overflow-y: hidden;">
	<h3>
		设置overflow-y属性
	</h3>
	测试文字测试文字测试文字测试文字测试文字测试文字
</div>

<div style="overflow: auto">
	<h3>
		设置overflow-y:auto属性
	</h3>
	测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>