CSS day03 2021-4-1

最新推荐文章于 2023-12-11 17:04:41 发布

ZivChen971206

最新推荐文章于 2023-12-11 17:04:41 发布

阅读量247

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_44390531/article/details/119674691

版权

前端基础专栏收录该内容

47 篇文章 0 订阅

订阅专栏

清除内外边距

*{
padding:0;
margin:0;
}

行内元素尽量只设置左右的内外边距

PS基本操作

Ctrl+R 打开标尺

按住space键拖动视图

Ctrl+D 取消选区

产品模块案例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="box">
  <img src="img/pms_1596073939.80384505.jpg" alt="">
  <p class="comment1">快递牛，整体不错蓝牙可以说秒连，红米给力</p>
  <div class="comment2">
    来自于117384232的评价
  </div>
  <div class="footer">
    <span class="name">Redmi AirDots真无线蓝牙耳机...</span>
    <span class="price">99.9元</span>
  </div>
</div>
</body>
<style>
  *{
   margin: 0;
    padding: 0;
  }
  .box {
    margin: 100px auto;
    width: 400px;
    height: 600px;
    background-color: #f3f5f2;
  }
  .box img{
    width: 100%;
  }
  .box .comment1{
    margin-top: 20px;
    height: 70px;
    font-size: 28px;
    padding: 0 28px;
  }
  .box .comment2{
    color: #888888;
    font-size: 12px;
    text-align: left;
    padding: 0 28px;
    margin-top: 10px;
  }
  .footer{
    font-size: 14px;
    padding: 0 28px;
    margin-top: 10px;
  }
  .footer .name{

    border-right: 3px solid #888;
padding-right: 20px;
  }
  .footer .price{
padding-left: 10px;
    color: #ff8500;
  }


</style>
</html>

圆角边框（重点）

border-radius

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一般即可，或者直接写50%

如果是个矩形，设置为高度的一般就可以

该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角

盒子阴影（重点）

box-shadow

h-shadow 水平阴影的位置

v-shadow 垂直阴影的位置

blur 模糊距离

spread 阴影的尺寸

color 阴影的颜色

inset 将外部阴影改为内部阴影

文字阴影

text-shadow

h-shadow 水平阴影的位置

v-shadow 垂直阴影的位置

blur 模糊距离

color 阴影的颜色

浮动

标准流：就是标签按照规定默认方式排列

1.块级元素会独占一行，从上向下顺序排列

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动的特性（重难点）

1.浮动元素会脱离标准流

2.浮动元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

浮动布局的注意点

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动

我们实际工作中，几乎只用clear:both

清除浮动的方法

1.额外标签法也称隔墙法，是W3C推荐的做法

2.父级元素添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

清除浮动——：after伪元素法

CSS的书写顺序

1.布局定位 display、position、float、clear、visibility、overflow

2.自身属性 width、height、margin、padding、border、background

3.文本属性 color、font、text-decorate、text-align

4.其他属性（CSS3）content、cursor、border-radius

实际开发中，我们不会直接用链接a而是用li 包含链接（li+a）的做法

ZivChen971206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS day03 2021-4-1

清除内外边距*{padding:0;margin:0;}行内元素尽量只设置左右的内外边距PS基本操作Ctrl+R 打开标尺按住space键拖动视图Ctrl+D 取消选区产品模块案例<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&l
复制链接

扫一扫