HTML+CSS学习笔记pink

最新推荐文章于 2024-06-12 12:52:53 发布

Above the clouds*

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量318

点赞数 1

文章标签： css html5 html css3 javascript

本文链接：https://blog.csdn.net/qq_38129681/article/details/108521115

版权

HTML+CSS

第一章盒子模型
第二章浮动
第三章 PS切图
- 4.1常见的图片格式
第五章定位

第一章盒子模型

1.1内边距（padding)

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

1.2外边距（margin)

margin用于设置外边距，即控制盒子和盒子之间的距离。
在这里插入图片描述

1.2.1外边距典型应用

在这里插入图片描述

1.3外边距合并

使用margin定义块元素的垂直外边距时，可能出现外边距的合并
如嵌套块元素垂直外边距的塌陷。
在这里插入图片描述
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

  <style>       
   .father {           
    width: 400px;           
    height: 400px;           
    background-color: purple;            
    margin-top: 50px;          
    /* border: 1px solid red; */          
    /* border: 1px solid transparent; */            
    /* padding: 1px; */            
    overflow: hidden;        }        
    .son {           
     width: 200px;           
     height: 200px;            
     background-color: pink;           
     margin-top: 100px;       
      }   
  </style>
   
  <body>    
      <div class="father">        
      <div class="son"></div>   
      </div>
 </body>

1.4清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们布局前，首先要清除下网页元素的内外边距。
在这里插入图片描述

1.4PS基本操作

在这里插入图片描述

疑问解答

在这里插入图片描述

1.5圆角边框

在CSS3中，新增了圆角边框样式，这样我们就可以给盒子变圆角了。
border-radius属性用于设置元素的外边框圆角
下面展示一些 内联代码片。

//语法
border-radius:length;

在这里插入图片描述

1.6盒子阴影

CSS3新增了盒子阴影，我们可以用box-shadow属性为盒子添加阴影。
下面展示一些 内联代码片。

语法：


```javascript
box-shadow: h-shadow v-hadow blur spread color inset

在这里插入图片描述

1.7文章阴影

在CSS3中，可以使用text-shadow属性将阴影应用于文本
语法：
下面展示一些 内联代码片。

text-shadow: h-shadow v-shadow blur color;

在这里插入图片描述

第二章浮动

2.1标准流（普通流/文档流）

标准流即标签按照规定好默认方式排列
在这里插入图片描述

2.2浮动

2.2.1 为什么需要浮动

在这里插入图片描述

总结：有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因此浮动可以改变元素标签默认的排列方式。
浮动典型应用：可以让多个块级元素一行内排列显示。
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.2.2什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
下面展示一些 内联代码片。


```javascript
选择器{ float：属性值；}

在这里插入图片描述

2.2.3浮动的特性

在这里插入图片描述

知识点：浮动元素会具有行内块元素特性。
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后就具有行内块元素相似的特性。
1、如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动之后，他的大小根据内容来决定。
2、浮动的盒子中间没有缝隙，是紧挨着的。
3、行内元素同理。

2.2.4 浮动元素经常和标准流父级搭配使用

在这里插入图片描述
常见网页布局

在这里插入图片描述

浮动布局注意点

2.3清除浮动

2.3.1 为什么要清除浮动

在这里插入图片描述
由于在正常情况下，会添加更多的产品，这时如果给父盒子设置了高度，那么在后续添加子盒子的时候，要更改父盒子的高度，这很麻烦，这时就要用到清除浮动。

清除浮动的本质
1、清除浮动元素造成的影响。
2、如果父盒子本身有高度，则不需要清除浮动
3、清除浮动后，父级就会根据浮动的盒子自动检测高度，父级就有了高度，就不会影响下面的标准流了。
语法：
下面展示一些 内联代码片。

选择器{ clear： 属性值；}

在这里插入图片描述

2.3.2清除浮动的方法

1、额外标签法也称为隔离阀，是W3C推荐的做法
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素

1额外标签法

在这里插入图片描述
下面展示一些 内联代码片。

即在最后一个子盒子后面添加一个块元素，然后给其添加.clear样式

<style>
  .clear {        
      clear: both;    
          }   
</style>
<body>
 <div class="clear"></div>    
 <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->       
 <!-- <span class="clear"></span> -->
</body>

2父级添加overflow

在这里插入图片描述
下面展示一些 内联代码片。

即给父级盒子样式添加overflow: hidden

 .box {            
 /* 清除浮动 */        
     overflow: hidden;        
     width: 800px;        
     border: 1px solid blue;        
     margin: 0 auto;        }

3：after伪元素法

在这里插入图片描述
下面展示一些 内联代码片。

样式中添加clearfix类，即如下代码，将父盒子添加次类样式

 .clearfix:after {      
       content: "";      
       display: block;       
       height: 0;          
       clear: both;         
       visibility: hidden;  
         }
 .clearfix {           
  /* IE6、7 专有 */          
    *zoom: 1;      
      }

4双伪元素法

在这里插入图片描述
下面展示一些 内联代码片。

样式中添加clearfix类，即如下代码，将父盒子添加次类样式

.clearfix:before,       
.clearfix:after {      
       content: "";        
       display: table;    
           }
       
.clearfix:after {        
       clear: both;   
         }
.clearfix {        
       *zoom: 1;    
         }

总结：在这里插入图片描述

第三章 PS切图

4.1常见的图片格式

在这里插入图片描述

第五章定位

5.1为什么要定位

在这里插入图片描述

5.2 定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素咋i文档中的定方式。
边偏移决定了改元素的最终位置

5.2.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置在这里插入图片描述

5.2.2 边偏移

边偏移就是定位的盒子移动到最终的位置。有top,bottom,left,right 4个属性在这里插入图片描述

5.3 静态定位（static）

在这里插入图片描述

5.4 相对定位

相对定位是元素在移动位置的时候，是相对其自己原来位置来说的
语法：
下面展示一些 内联代码片。

选择器 {position ：relative}

相对定位的特点：
1、它是相对于自己原来的位置移动的（移动位置的时候参照自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它（不脱标，继续保留原来的位置）因此，相对定位并没有脱标。最典型的应用就是给绝对定位当爹

5.5 绝对定位

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。
语法：

选择器 {position ：absolute;}

绝对定位的特点：
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器定位为准。
2、如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。
3、绝对定位不占有原先的位置。（脱标）

5.6 子绝父相的由来

在这里插入图片描述

5.7 固定定位

固定定位是元素固定与浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
下面展示一些 内联代码片。

语法：

选择器 {position ：fixed;}

固定定位的特点：
1、以浏览器的可视窗口为参考点移动元素；
a、跟父元素没有任何关系
b、不随滚动条滚动
2、固定位置不占有原先的位置
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位

5.7.1 固定定位使用

5.7.1.1 固定在版心右侧位置

在这里插入图片描述

5.7.2 绝对定位盒子居中

在这里插入图片描述
定位的特殊性：绝对定位和固定定位和浮动类似
1、行内元素加绝对或固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。

5.7.3 定位的扩展

脱标的盒子不会触发边距塌陷
浮动元素、绝对定位（固定定位）的元素都不会触发边距合并的问题。
在这里插入图片描述

Above the clouds*

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习笔记pink

HTML+CSS第一章盒子模型1.1内边距（padding)1.2外边距（margin)1.2.1外边距典型应用1.3外边距合并1.4清除内外边距1.4PS基本操作疑问解答1.5圆角边框1.6盒子阴影1.7文章阴影第二章浮动2.1标准流（普通流/文档流）2.2浮动2.2.1 为什么需要浮动2.2.2什么是浮动2.2.3浮动的特性2.2.4 浮动元素经常和标准流父级搭配使用2.3清除浮动2.3.1 为什么要清除浮动2.3.2清除浮动的方法1额外标签法2父级添加overflow3：after伪元素法4双伪元
复制链接

扫一扫