css 关于子元素在父元素盒子中的呈现方式

最新推荐文章于 2024-04-16 07:28:50 发布
最新推荐文章于 2024-04-16 07:28:50 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_37646901/article/details/79083768
版权

父元素不设置width和height，子元素的呈现方式

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      background-color: red;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
    }

    #txtbox {
      background-color: blue;
    }
    #txt {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

父元素设置width和height，子元素的呈现方式

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      width: 600px;
      height: 100px;
      background-color: red;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
    }

    #txtbox {
      width: 600px;
      height: 100px;
      background-color: blue;
    }
    #txt {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

父元素设置padding、border、margin，页面呈现方式

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      background-color: red;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
    }

    #txtbox {
      background-color: blue;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #txt {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      width: 600px;
      height: 100px;
      background-color: red;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
    }

    #txtbox {
      width: 600px;
      height: 100px;
      background-color: blue;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #txt {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

父元素和子元素设置padding、border、margin，页面呈现方式

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      background-color: red;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }

    #txtbox {
      background-color: blue;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #txt {
      background-color: pink;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test</title>

  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #imgbox {
      width: 600px;
      height: 100px;
      background-color: red;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #image {
      width: 100px;
      height: 56px;
      background-color: green;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }

    #txtbox {
      width: 600px;
      height: 100px;
      background-color: blue;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
    #txt {
      background-color: pink;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="imgbox">
    <img id="image" src="i-7.png"/>
  </div>

  <div id="txtbox">
    <p id="txt">Hello World!</p>
  </div>
</body>
</html>

这里写图片描述

13-c
关注
专栏目录
CSS实现子元素在父元素中水平垂直居中的方法总结
weixin_42678796的博客
10-12 820
运行效果 HTML结构 <div class="container"> <div class="content"></div> </div> 实现方式 1. 绝对定位 + margin:auto 思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中 .container { width: 200px; height: 200px;
css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素
weixin_35891744的博客
08-04 1008
[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...
css通过子元素选择父元素
progrmmmm的博客
07-19 9633
如：elementui的table的type="expand"表格展开行。点击展开后td标签有padding。但td标签和包裹他的tr标签都是点击后产生的。无法在外层包裹div，直接用::v-deep会改变包裹他的表格的样式。个别UI框架个别标签通过事件直接生成或者无法选中的情况。直接使用::v-deep会导致全部标签改变，包裹标签使用class名::v-deep无法选中父元素改变父元素属性的情况。所以可以使用伪类:has来改变td标签的padding。伪类:has选择父元素。
css设置子元素的样式
qq_60976312的博客
09-30 4833
css设置子元素的样式
css中选取子元素
生存不忘生活
08-08 5819
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
CSS 子元素选择器
sunshine_0880的博客
09-23 2953
CSS中子元素选择器比较有针对性，只能作为某元素子元素的元素。 语法：父元素 > 子元素 { 属性:属性值;} 需要注意的是，>的前后均有空格，且不能省略。 （类比京东页面的一部分） Document .nav { background-color: rgba(111,111,111,1); width: 230px; height: 500px;
通用的css设置子元素水平和垂直居中的方法
freddy的博客
04-27 202
css设置子元素水平和垂直居中的方法，抛开定位，flex布局以及grid布局水平居中 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 水平居中 如果子元素为行内元素，可以在父元素设置：text-align:center; <!DOCTYPE html> <html> <head> <meta charset="utf-8">
纯CSS让子元素突破父元素的宽度限制
11-19
在CSS布局中，我们经常遇到子元素无法突破父元素的宽度限制的问题，这是因为在默认情况下，子元素的宽度是受限于父元素的宽度的。但是，有时候我们需要子元素突破父元素的宽度限制，以实现某些特殊的布局效果。 在...
详解CSS 子元素相对于父元素固定定位解决方案
11-19
在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。 首先，我们来回顾一下绝对定位（absolute）和相对定位...
CSS初入门：设置子元素水平居中的方式
lalala_dxf的博客
04-01 5853
问题描述： 用几种方式实现元素位于父元素的水平居中位置，如图： 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果。 在那之前，我先举个我遇到过的错误示范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
其他人不会告诉你的 CSS 子元素选择器小技巧~
最新发布
qq_30094821的博客
04-16 650
当我们需要特定的子元素应用特定样式，同时又不希望这些样式影响到其他后代元素时，该怎么办？
CSS盒子模型
qq_43812504的博客
11-27 440
CSS盒子模型 组成：content -> padding -> border -> margin（从内到外） ①content: 内容区域 width和height组成的 ②padding: 内边距/内填充 padding:30px 30px; /padding:30px; 只写一个值：30px(表示上下左右) 写两个值：30px 40px (上下、左右) 写三个值（不建议）（上 左右 下） 写四个值：30px 40px 50px 60px（上 右
CSS基础（2）
weixin_56498069的博客
02-28 5012
css基础：复合选择器、css元素显示模式、css背景相关知识等
css 所有后代元素,CSS 选择子元素和后代元素
weixin_42300090的博客
08-04 4947
内层11内层12内层21子元素概念:如上代码 , id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。这种包含是直接包含， 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id为 container 的div元素的直接子元素而 id 为 layer1 的div元素 又包含了 id 为 i...
鼠标经过的样式变化(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-06 1193
当用户移动鼠标到指定的区域或内容时，会出现什么不一样的渲染效果呢？看这篇文章一起来了解吧！
CSS之布局（盒子模型--外边距）
不动声色的小蜗牛的博客
07-15 171
盒子模型--外边距： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型--外边距</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: solid 10px orange
父子元素html
weixin_73310187的博客
08-29 379
html。
css子元素如何撑开父级元素
Teheran的博客
01-10 8930
当子级元素宽度不固定时 设置父级元素的 display: inline-block; 即可撑开父级元素。
vue2子元素在父盒子排列换行
05-25
你可以使用 CSS 的 `flexbox` 布局来实现子元素在父盒子中排列换行。具体来说，需要给父盒子设置 `display: flex;` 和 `flex-wrap: wrap;` 属性，让子元素能够在父盒子中自动换行。例如： ```html 子元素1 子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值