大前端学习笔记（3）

最新推荐文章于 2024-05-20 21:21:56 发布

Restart629

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量178

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_42942531/article/details/107441268

版权

CSS：定位机制和选择器

CSS基础：
1. 基本选择器：
  1. 类选择器；[ class=“lei” ]>>>>>[ .lei{ } ];
  2. 元素选择器; [ p/h1/…{ }];
  3. id选择器; [ id=“df” ]>>>>[#df{ }];
2. css书写位置：
  1. .css文件;
  2. head;
  3. 因素属性中；
3. 基本样式：
  1. 宽-高-位置-颜色-粗细-背景；
  2. 颜色的表示方法（rgba-三原色+透明度)；
  3. 单位表示方法-相对单位（em）、绝对单位；
    
    背景颜色：
```
body{
  	background-color:yellow;
  }
h1{
  	background-color:#00ff00;
  }
p{
  	background-color:rgba(255,0,255,.7);
  }
```
    背景图像：
```
body{ 
  	background-image: url("../bgimage.gif");
  	background-color: #000000;
    background-repeat: repeat-y;//背景图像平铺y轴
    background-position:center;//背景图片起始位置居中。
  }
```
    注：background-repeat 属性定义了图像的平铺模式。其主要平铺形式有：
    
    背景定位：可以利用 background-position 属性改变图像在背景中的位置。
    
    文本：
    
    text-indent 属性规定文本块中首行文本的缩进。
    
    text-align 属性规定元素中的文本的水平对齐方式。值如下：
    
    word-spacing 属性增加或减少单词间的空白（即字间隔）。
    
    letter-spacing 属性增加或减少字符间的空白（字符间距）。
    
    （*）text-decoration 属性规定添加到文本的修饰。（一般与超链接一起使用，为了消除超链接的下划线）；
```
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>

</html>
```
    字体：
    
    font-family 规定元素的字体系列。
    
    有两种类型的字体系列名称：
    - 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
    - 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。
    font-style 属性定义字体的风格。值如下：
    
    font-weight 属性设置文本的粗细。
    
    font-size 属性设置文本的大小。
    
    超链接：
    - a:link - 普通的、未被访问的链接
    - a:visited - 用户已访问的链接
    - a:hover - 鼠标指针位于链接的上方
    - a:active - 链接被点击的时刻
    css列表：list-style-type 属性设置列表项标记的类型。
  表格：border-collapse 属性设置是否将表格边框折叠为单一边框：
```
table, th, td
  {
  border: 1px solid blue;
  }
  table
  {
  border-collapse:collapse;//边框折叠
  }
```
定位机制
1. 盒子模型
  1. border （边框）、 margin（外间距）、padding（内） - top、bottom（下）、left、right
  2. 外边距合并解决方案（https://www.cnblogs.com/hermit-gyqy/p/10405715.html）
2. 文本流
  1. 在文档中，元素从左上向右下排列
  2. 元素分为两个基本类型：
    块级元素：
    1. 独占一行、自带换行符
    2. 设置宽高
    3. 可以嵌套块级和行内元素
      行内元素：
      1. 自然排列
      2. 一般不设置宽高
      3. 只能嵌套行内元素
3. 相对定位/绝对定位
  
  3.1 相对定位：(position:relative;)
  如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
  
  定位标准：是元素自身在文本流中的位置；
  
  并不影响其他元素；
  
  不破位文本流；
  
  3.2 绝对定位：(position:absolute;)
```
  绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样;
```
  定位标准：
  以上级中第一次出现定位机制的父容器为标;
  其他元素把发生绝对定位的元素视为不存在；
  破坏文本流
4.z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
```
  .box2{
    background-color: aquamarine;
    position: absolute;
  
    left: 80px;
    top: 80px;
  
    z-index: 99;
  }
  
```

5.浮动
float：left/right

clear: left/right / both

举例：三栏自适应布局-圣杯布局（链接：https://pan.baidu.com/s/1qoYUh2rKtrw64-9eVwyKQQ
提取码：csbj）

  <style>
  			.container{
  				width: 80%;
  			}
  			#wrap {
  				width: 100%;
  				height: 100px;
  				background-color: #fff;
  				float: left;
  			}
  			#wrap #center {
  				margin: 0 210px;/*0:上下；210px：左右*/
  				height: 100px;
  				background-color: #ffe6b8;
  			}
  			#left_margin,#right_margin {
  				float: left;
  				width: 200px;
  				height: 100px;
  				background-color: darkorange
  			}
  			#left_margin {
  				margin-left: -100%;
  				background-color: lightpink
  			}
  			#right_margin {
  				margin-left: -200px;
  			}
  		</style>

选择器
1. 基本选择器
2. 层次选择器：后代选择器、子元素选择器、相邻兄弟选择器
3. 伪类和伪元素：
  
  伪类-状态 :link 、：visited、：hover、：active（前文超链接已经提到过）
```
 伪元素：（新增元素）：before 、：after
```

CSS3选择器：

child：：first-child 、：last-child、：nth-child

not ：：not(selector)

p:first-child{
    color: red;
}

p:last-child{
    color: green;
    font-weight: bolder;
}

/*number
 * odd even
 * 2n  2n+1
*/
p:nth-child(2n+1){
     background-color: blue;
}

p:not(:first-child){
    height: 300px;
}

应用举例
1. 面包屑
html

  <!--面包屑导航-->
   <ol>
       <li><a href="#">主页</a></li>
       <li>系统管理</li>
       <li>用户管理</li>
   </ol>

css

    li{
        display: inline-block;
        margin-left: 10px;
   }

   li+li:before{
        display: inline;
        content: '/';
   }

隔行换色

    table,tr,td,th{
        border: 1px solid;
   }

   table{
   width: 700px;
    border-collapse: collapse;
     }

   tbody tr:nth-child(odd){
       background-color: greenyellow;
   }

3）按钮组

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>but</title>
    <link rel="stylesheet" href="../style/but.css">

</head>
<body>
<div class="but-group">
    <button type="button" class="btn btn-default1">按钮 1</button>
    <button type="button" class="btn btn-default2">按钮 2</button>
    <button type="button" class="btn btn-default3">按钮 3</button>
</div>


</body>
</html>

css:

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/*光标放在上面会有颜色变化*/
.btn-default1 {
    color: #333;
    background-color: #78e5d4;
    border-color: #ccc;
}
.btn-default1:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}

.btn-default2 {
    color: #333;
    background-color: #e578d3;
    border-color: #ccc;
}
.btn-default2:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default3 {
    color: #333;
    background-color: #78d237;
    border-color: #ccc;
}
.btn-default3:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}


/*实现but 合并*/
.but-group .btn:first-child:not(:last-child){
    border-bottom-right-radius: 0;/*消除右下棱角*/
    border-top-right-radius: 0;/*消除右上棱角*/
}

.but-group .btn:last-child:not(:first-child){
    border-bottom-left-radius: 0;/*消除左下棱角*/
    border-top-left-radius: 0;/*消除左上棱角*/
}
/*判断出不是第一、不是最后一个but;*/
.but-group .btn:not(:last-child) :not(:first-child){
    border-radius: 0;
}
/*调整but之间的间隔*/
.but-group .btn+.btn {
    margin-left: -1px;
}
.but-group > .btn{
    float: left;
}

在这里插入图片描述

通过知识点的切入，然后对其css基础和定位机制、选择器等相关知识点进行穿插学习。

Restart629

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
大前端学习笔记（3）

CSS：定位机制和选择器CSS基础：基本选择器：类选择器；[ class=“lei” ]>>>>>[ .lei{ } ];元素选择器; [ p/h1/…{ }];id选择器; [ id=“df” ]>>>>[#df{ }];css书写位置：.css文件;head;因素属性中；基本样式：宽-高-位置-颜色-粗细-背景；颜色的表示方法（rgba-三原色+透明度)；
复制链接

扫一扫