新闻快报模块-C3盒子模型的作用

最新推荐文章于 2023-05-14 15:02:35 发布
最新推荐文章于 2023-05-14 15:02:35 发布
阅读量3.1k 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40703303/article/details/118728837
版权

要实现这样的效果

这是3个图片，布局是 50% 25% 25%

则代码如下

 

 

 此时效果 

 这里图片之间并没有竖线

那么给盒子加上左边框

 但这样会将图片挤下去

我们可以用C3盒子模型，可以将padding和border值都算进去

 

 因此可以这样改

 

 

 

 

 

 

shawn_jing128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基础学习13 c3 新盒模型
aZF1997的博客
08-01 1061
css3新增选择器+属性 1：c3属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 chrome 、Safiri 浏览器 ： -webkit- FireFox : -moz- IE: -ms- opera : -o- 先写标准的CSS3属性,在写css3属性 2：c3选择器 (1)毗邻选择 和兄弟选择器 /*...
css盒子模型-京东快报
08-28
总的来说，理解并熟练运用CSS盒子模型是前端开发中的基本技能，它在创建复杂的网页布局和优化页面视觉效果方面发挥着关键作用。在"京东快报"这样的项目实践中，你可以通过实践来加深对这一概念的理解，并提升自己的...
H5/C3进阶(6) -- CSS盒子模型
mocoll的博客
08-10 851
7、CSS盒子模型 7.1、盒子模型 页面布局要学习的三大核心，盒子模型 ， 浮动 和 定位 。学习好盒子模型能非常好的帮助我们布局页面。 7.1.1、看透网页布局的本质 网页布局过程; 1.先准备号相关的网页元素，网页元素基本都是盒子 Box。 2.利用CSS设置好盒子样式,然后摆放到相应位置。 3.往盒子里面装内容。 网页布局的核心本质:就是利用CSS摆盒子。 7.1.2、盒子模型（Box Model）组成。 所谓 盒子模型 :就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型
2301_76223809的博客
02-04 302
CSS 中规定每个盒子分别由:内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域(margin)构成，这就是盒子模型。浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。外边距的问题1.合并现象：在制作网页垂直布局的的块级元素，上下的margin会合并。特性:不同选择器有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局。
H5 + C3基础（二）（常用复合选择器 & 边框盒模型 & C3其他特性）
最新发布
冰糖的博客
05-14 913
之前的选择器 按简单类型分为 id, class, 标签，而C3 提供了一些新的选择器，拥有更强大的能力。在html中，盒子默认是内容盒模型；这种模型下：盒子实际占用尺寸 = 宽高 + padding + 边框；位置新增元素，由于新增的元素，在html结构无法查看，故称伪元素。calc （参数）;因此C3推出了另一种盒子模型，这种模型是以盒子。，padding 和 边框 不再撑大盒子尺寸。outer2 内部的一个伪元素，默认不显示。伪元素，就是在现有的html 元素。通常用于选择父元素下子元素的场景。
CSS3之盒子模型详解
qq_42445025的博客
06-30 783
CSS3之盒子模型详解 1、什么是盒子模型？ CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 在CSS中盒模型被分为两种：第 一种 是 W3C的标准模型，另一种 是IE的传统模型（也叫怪异盒模型）。 2、W3C 的标准...
信息技术快报2008-4.
05-06
信息技术快报2008-4,可以了解当前的信息技术发展的动态
新闻快报
02-14
新闻快报 Scrape For News允许用户从Vietcetera网站抓取最新消息，包括标题，摘要和URL链接。 用户可以添加保存他们喜欢的文章，在保存的文章上发表评论或在用户不再需要它时删除该文章。 依存关系 安装以下节点模块...
全球学术快报-0.1.12.dmg
12-02
官方的caj浏览器 mac版本
全球学术快报-0.0.11.dmg
10-26
Mac新用户，科研
C3盒模型以及他出现的必要性和圆角边框/前端三
qq_39112101的博客
03-20 995
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--css3盒模型 旧盒模型 盒子宽度=width+padding*2+border*2 css3新盒...
【前端学习日志】移动端基础&视口&二倍图&C3盒子模型&常见布局&flex布局
P9ulp的博客
07-21 720
一些学习记录
两种盒子模型
m0_62648436的博客
03-29 945
css两种盒子模型
Web前端基础全家桶教程（含HTML、CSS、 HTML5、CSS3）
12-19
本套Web前端基础全家桶教程是全新录制，将前端学习的基础内容融汇为148节课，涵盖了HTML、CSS、HTML5和CSS3的核心技术点。通过对本教程的学习，可以帮助初学者快速上手，并完成大部分静态网页的开发。 教程的具体内容包括：基本的html标签、html5新标签、css的基本用法、盒子模型、浮动、定位、flexbox、css sprite、 iconfont、transform、transition、animation、media query、less、vs code、Photoshop等；还包含了移动端开发的基础知识，如视口、移动端的适配等（这些内容使我们可以在不应用任何js代码的情况下即完成移动端的适配）。除此之外，课程涵盖 大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。
【CSS】CSS 的盒子模型
weixin_50836184的博客
05-11 130
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box） （2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分 IE盒模型和W3C标准盒模型的区别： （1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding （2）IE盒模型：属性width，height包含content、border和padding，指的是content +padding+
【02】 PC端网页布局之CSS3-pink老师-2022/03
qq_44722174的博客
03-15 4079
PC端网页布局之CSS3 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 1. CSS基础 css最大价值：让HTML专注做结构呈现，样式交给CSS，即结构和样式相分离。主要调整文本内容、图像、页面布局和外观美化等。（网页的美容师） CSS代码风格 样式格式书写：紧凑格式和展开格式（强烈推荐） 样式大小写风格：全部使用小写（更加直观） 样式空格风格：冒号后，保留一个空格；选择器（标签）和大括号间保留一个空格
CSS3盒模型
qq_45044074的博客
03-09 121
盒模型 直接影响整个结构的好与坏,影响js的复杂程度 怪异模式下的盒模型 IE 6 Quirks mode 普通模式下 boxWidth = width + border2 +padding 2 contentWidth = width IE6混杂模式 boxWidth = width contentWidth = width - border2 - padding2 触发:box-sizing: 默认:content-box 混杂:border-box 应用： 1.宽度不固定,但要求内边距固
前端基础总结之css 03_盒模型
宫小白
01-04 441
知识导航： 盒子边框 盒子内边距 盒子外边距 涉及部分c3内容 网页的本质就是利用css设置盒子的大小，摆放盒子的位置。最后把内容图片、文字等放入其中。 标准的盒子模型： 1. 盒子边框 基本语法： border : border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px ...
H5C3--盒子模型
weixin_30443895的博客
01-13 964
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值