CSS盒子模型的详细解析(2)

简介: 行内元素 – 内外边距问题场景:行内元素添加 margin 和 padding,无法改变元素垂直位置解决方法:给行内元素添加 line-height 可以改变垂直位置

CSS盒子模型的详细解析(1):https://developer.aliyun.com/article/1393334

行内元素 – 内外边距问题

场景:行内元素添加 margin 和 padding,无法改变元素垂直位置

解决方法:给行内元素添加 line-height 可以改变垂直位置

span {
  /* margin 和 padding 属性,无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

圆角

作用:设置元素的外边框为圆角。

属性名:border-radius

属性值:数字+px / 百分比

提示:属性值是圆角半径

  • 多值写法

技巧:从左上角开始顺时针赋值,当前角没有数值则与对角取值相同。

  • 正圆形状:给正方形盒子设置圆角属性值为 宽高的一半 / 50%
img {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border-radius: 50%;
}
  • 胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子阴影(拓展)

作用:给元素设置阴影效果

属性名:box-shadow

属性值:X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

  • X 轴偏移量 和 Y 轴偏移量 必须书写
  • 默认是外阴影,内阴影需要添加 inset
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

04-综合案例-产品卡片

CSS 书写顺序:

  1. 盒子模型属性
  2. 文字样式
  3. 圆角、阴影等修饰属性

HTML标签

<div class="product">
  <img src="./images/liveSDK.svg" alt="">
  <h4>抖音直播SDK</h4>
  <p>包含抖音直播看播功能</p>
</div>

CSS样式

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #f1f1f1;
  }
  .product {
    margin: 50px auto;
    padding-top: 40px;
    width: 270px;
    height: 253px;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
  }
  .product h4 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #333;
    font-weight: 400;
  }
  .product p {
    font-size: 12px;
    color: #555;
  }
</style>

05-综合案例二 – 新闻列表

整体布局

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.news {
  margin: 100px auto;
  width: 360px;
  height: 200px;
  /* background-color: pink; */
}
</style>
<div class="news"></div>

标题区域

<style>
.news .hd {
  height: 34px;
  background-color: #eee;
  border: 1px solid #dbdee1;
  border-left: 0;
}
.news .hd a {
  /* -1 盒子向上移动 */
  margin-top: -1px;
  display: block;
  border-top: 3px solid #ff8400;
  border-right: 1px solid #dbdee1;
  width: 48px;
  height: 34px;
  background-color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #333;
}
</style>
<div class="hd"><a href="#">新闻</a></div>

内容区域

<style>
.news .bd {
  padding: 5px;
}
.news .bd li {
  padding-left: 15px;
  background-image: url(./images/square.png);
  background-repeat: no-repeat;
  background-position: 0 center;
}
.news .bd li a {
  padding-left: 20px;
  background: url(./images/img.gif) no-repeat 0 center;
  font-size: 12px;
  color: #666;
  line-height: 24px;
}
.news .bd li a:hover {
  color: #ff8400;
}
</style>
<div class="bd">
  <ul>
    <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
    <li><a href="#">在希望的田野上...</a></li>
    <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
    <li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li>
    <li><a href="#">G9“带货”背后:亏损面持续扩大,竞争环境激烈</a></li>
    <li><a href="#">多地力推二手房“带押过户”,有什么好处?</a></li>
  </ul>
</div>

相关文章
|
1天前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
7 2
|
5天前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
10 1
|
8天前
|
前端开发
CSS的盒子模型:掌握网页设计的基石!
CSS的盒子模型:掌握网页设计的基石!
|
9天前
|
前端开发
CSS盒子模型
【5月更文挑战第4天】CSS盒子模型。
24 7
|
9天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
9天前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
9天前
|
前端开发
CSS 盒子模型
CSS 盒子模型。
17 4
N..
|
9天前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
16 0
|
9天前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
9天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
129 0

热门文章

最新文章

推荐镜像

更多