css选择器，盒模型，浮动，定位和css3

最新推荐文章于 2024-07-18 20:18:47 发布

轻魂魁

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量192

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43723890/article/details/108195073

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html结构和css选择器和盒模型

html文档结构
文档描述文档内容
标签的类型
1. 块级标签 (block) 独占一行，支持设置宽高
2. 行级标签 (inline) 多个在一行，内容撑开宽高，
3. 行级块标签 (inline-block) 在一行，支持这是宽高
4. 可以通过display属性进行转换
选择器
1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 后代选择器
6. - 全选择
7. 他们的优先级别
css的三种样式
1. 行间样式
2. 页内样式
3. 页外样式
4. 优先级
盒模型
1. 兄弟级别用margin
2. 父子级别用padding

代码实例

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/demo3.css"/>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<span id="a">111</span>
			<div class="top">
				<div class="top_left">
					<div id="aa">
						<img src="2.jpg" >
					</div>
					<div id="aa1">
						<h3>11</h3>
						<p>11111<br>
					1111111<br>1111</p>
					</div>
				</div>
				<div class="top_right">
					<div id="bb">
						<img src="3.jpg" >
					</div>
					<div id="bb1">
						<h3>1111</h3>
						<p>，<br>
					1111<br>11111</p>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="bottom_left">
					<div id="cc">
						<img src="4.jpg" >
					</div>
					<div id="cc1">
						<h3>1111</h3>
						<p>1111<br>
					11111</p>
					</div>
				</div>
				<div class="bottom_right">
					<div id="dd">
						<img src="5.jpg" >
					</div>
					<div id="dd1">
						<h3>11111</h3>
						<p>为11111<br>
					11111<br>111111</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

* {
	padding: 0px;
	margin: 0px;
}
.box{
	    width:1200px;
		margin-left: auto;
		margin-right: auto;
}
#a {
	font-size: 50px;
	padding-left: 400px;
}
.top_left,.top_right {
	display: inline-block;
	vertical-align: middle;
}
.bottom_left,.bottom_right{
	display: inline-block;
	vertical-align: middle;
}
.top_left {
    width: 500px;
	height: 200px;
	border-bottom: 2px solid #ddd;
	
}
#aa {
	display: inline-block;
	vertical-align: middle;
}
#aa1{
	display: inline-block;
	vertical-align: middle;
}
.top_right {
    width: 500px;
	height: 200px;
	border-bottom: 2px solid #ddd;
	border-left: 2px solid #ddd;
}
#bb {
	display: inline-block;
	vertical-align: middle;
}
#bb1{
	display: inline-block;
	vertical-align: middle;
}
.bottom_left {
    width: 500px;
	height: 200px;
	border-bottom: 2px solid #ddd;

}

#cc {
	display: inline-block;
	vertical-align: middle;
}
#cc1{
	display: inline-block;
	vertical-align: middle;
}
.bottom_right {
    width: 500px;
	height: 200px;
	border-bottom: 2px solid #ddd;
	border-left: 2px solid #ddd;
}
#dd {
	display: inline-block;
	vertical-align: middle;
}
#dd1{
	display: inline-block;
	vertical-align: middle;
}

css浮动和定位

浮动
1. float: left right
2. 浮动之后就脱离文档流
3. 清除浮动 clear:both
  overflow:hidden
  after伪类
定位
1. position:relative,absolute,fixed
2. left,right,top,buttom
3. z-index

代码实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        color: black;
      }
      .box .left {
        float: left;
        padding-left: 10px;
      }
      .box .right {
        float: right;
        padding-right: 10px;
      }
      li {
        list-style: none;
      }
      li a:hover {
        color: blue
      }
      .right ul li,.left ul li {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
      }
      .box {
        padding-top: 20px;
      }
      .clear:after {
        display: block;
        content: "";
        clear: both;
      }
	  .body{
		  text-align: center;
	  }
	  .search input{
           height: 40px;
		   width: 700px;
		   border-radius: 10px;
		   border: 1px solid #333;
	  }
	  .search input:focus{
		  border: 1px solid #eee;
		  border-radius: 10px;
	  }
	  .search a{
		  background-color: #0000FF;
		  padding: 8px 10px;
		  border-radius: 4px;
		  color: white;
	  }
	  .bottom_top{
		 
	  }
    </style>
  </head>
  <body>
    <div class="box clear">
      <div class="left">
        <ul>
          <li>
            <a href="#">新闻</a>
          </li>
          <li>
            <a href="#">hao123</a>
          </li>
          <li>
            <a href="#">地图</a>
          </li>
          <li>
            <a href="#">视频</a>
          </li>
          <li>
            <a href="#">贴吧</a>
          </li>
          <li>
            <a href="#">学术</a>
          </li>
          <li>
            <a href="#">更多</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li><a href="#">抗击疫情</a></li>
          <li><a href="#">设置</a></li>
          <li><a href="#">登录</a></li>
        </ul>
      </div>
    </div>
    <div class="body">
      <dir class="img">
		  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
	  </dir>
	  <div class="top">
	  	<div class="top">
			<div class="search">
				<input type="text" id="1"/><a href="#">百度搜索</a>
			</div>
	  		
	  	</div>
		<div class="bottom">
			<div class="bottom_top clear">
				<h4>百度热搜</h4>
				<span>换一换</span>
			</div>
			<div class="bottom_bottom">
				
			</div>
		</div>
	  </div>
    </div>
  </body>
</html>

css3的相关用法

过度的使用： transition: 1s 使效果在一秒内逐渐加载

translateY，rotateX：实现3d的旋转。

3d动画的实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>正方体</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        margin: 100px auto 0;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
      }
      .box div {
        width: 150px;
        height: 150px;
        position: absolute;
      }
      .top {
        background: red;
        transform: translateY(-75px) rotateX(90deg);
      }
      .buttom {
        background: yellow;
        transform: translateY(75px) rotateX(-90deg);
      }
      .front {
        background: green;
        transform: translateZ(75px);
      }
      .bg {
     
        transform: translateZ(-75px);
      }
      .left {
        background: gray;
        transform: translateX(-75px) rotateY(-90deg);
      }
      .right {
        background: blue;
        transform: translateX(75px) rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">顶部</div>
      <div class="left">左边</div>
      <div class="right">右边</div>
      <div class="front">前边</div>
      <div class="bg">后边</div>
      <div class="buttom">底部</div>
    </div>
  </body>
</html>
</html>

轻魂魁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器，盒模型，浮动，定位和css3

html结构和css选择器和盒模型html文档结构文档描述文档内容标签的类型块级标签 (block) 独占一行，支持设置宽高行级标签 (inline) 多个在一行，内容撑开宽高，行级块标签 (inline-block) 在一行，支持这是宽高可以通过display属性进行转换选择器标签选择器class选择器id选择器复合选择器后代选择器全选择他们的优先级别css的三种样式行间样式页内样式页外样式优先级盒模型兄弟级别用m
复制链接

扫一扫