CSS样式中针对盒子样式的属性及技巧

已于 2022-04-10 14:36:56 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： htmlcss 文章标签： css3 html5
于 2022-04-05 16:43:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jsy_997/article/details/123970337
版权

1.overflow属性

        这个属性规定了当内容比盒子设置的大小要大时，发生的事情

                语法：overflow：visible | hidden | scroll | inherit;

                visible：默认值，文本内容不会被裁剪，全部显示在盒子中，显示不下时，会呈现在盒子外。

                hidden：只显示盒子内部的内容，盒子显示不下的内容会被隐藏。

                scoll：盒子内的内容如果超出盒子能够显示的部分，那么就会出现滚动条。可以滚动查看。

                inherit：继承父盒子的overflow的属性。

2.overflow-wrap属性

        这个属性在长度溢出容器时，浏览器允许换行。

                语法：overflow-wrap：normal | break-word ；

                normal：盒子中如果存在特别长的单词，长度已经达到了盒子的宽度，那么该单词在normal属性下不会换行，超出盒子的部分会在盒子后正常显示。只会在断点处换行，如空格、符号。

                break-word：盒子内容会在盒子宽度承受不住时，自动换行。

3.盒子边框重叠问题

        这个问题也是我今天练习时遇到的问题。

        1.如果使用的是table表格，那么边框之间就可以选用border-collapse属性

        以上两图为同一个表格，第二表格在第一张表格的基础上，给table标签加了条样式。border-collapse：collapse;

        border-collapse该样式属性一共包括三个值：separate、collapse、inherit；

        这里的separate其实就是默认值，表示边框分离开，就如上面的左图所示。然后inherit还是继承属性。

        2.如果使用的是普通盒子之间的border叠加问题。那么可以选用margin属性。        

        讲到这里说一点，盒子就算设置了display：inline-block；想要在一行内显示，盒子之间也会存在一点空白间隙。这时候就需要我们设置一个font-size：0；来消除这个间隙。就我而言我一般在通配符中连同消除系统自带的内外边距时，一起设置了。设置后，文中有文字的部分都需要在其样式下都设置一下大小，否则会被通配符中设置的值给覆盖掉而不显示。

                                  

        然后我们消除盒子边框叠加的效果，明显感觉到叠加的部分更粗。 下图就是放大后的效果，明显可以看到盒子1、盒子2边框叠加部分是比盒子的其他边的黑边框更粗。这是，我们需要给左边盒子一个margin-right:-1px;或者给右边的盒子一个margin-left：-1px；这里的外边距的值是根据我们设置的边框来定的。

        我设置了边框为1px，叠加部分为2px，那么我只需要左右的一个盒子向另一个盒子的方向移动一个边框的距离就可以消除重叠的影响。不需要多移动，再移动盒子的边框就会移出来了。

        最后附上今天写小练习。源码也附上。那连个小图就不附了，想练手的可以自行找图替代或者私聊我要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="root">
        <div class="title">新书热卖榜</div>
        <div class="content">
            <ul class="header">
                <li>
                    <a href="#">总榜</a>
                </li>
                <li>
                    <a href="#">童书</a>
                </li>
                <li>
                    <a href="#">励志</a>
                </li>
                <li>
                    <a href="#">保健</a>
                </li>
                <li>
                    <a href="#">美食</a>
                </li>
            </ul>
            <div class="first">
                <div>
                    1
                </div>
                <div>
                    <img src="./img/book.jpg" alt="">
                </div>
                <div>
                    <span>
                        <a href="#">基地重生沙克尔顿南极</a>
                    </span>
                    <span>￥40.10</span>
                    <span>￥68.00</span>
                    <span>333条评论</span>
                </div>
            </div>
            <div class="line"></div>
    
            <div class="content-item">
                <span class="one">2</span>
                <span class="two">
                    <a href="#">奇幻梦境:-本漫游奇境的手绘</a>
                </span>
            </div>
            <div class="line"></div>
    
            <div class="content-item">
                <span class="one">3</span>
                <span class="two">
                    <a href="#">奇幻梦境:-本漫游奇境的手绘</a>
                </span>
            </div>
            <div class="line"></div>
    
            <div class="content-item">
                <span class="one">4</span>
                <span class="two">
                    <a href="#">奇幻梦境:-本漫游奇境的手绘</a>
                </span>
            </div>
            <div class="line"></div>
    
            <div class="content-item">
                <span class="one">5</span>
                <span class="two">
                    <a href="#">奇幻梦境:-本漫游奇境的手绘</a>
                </span>
            </div>
            <div class="line"></div>
    
            <div class="content-item">
                <span class="one">6</span>
                <span class="two">
                    <a href="#">奇幻梦境:-本漫游奇境的手绘</a>
                </span>
            </div>
            <div class="line"></div>
        </div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

.root{
    width: 245px;
    margin: 0 auto;
}

.title{
    height: 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    padding-left: 30px;
    margin-bottom: 5px;
    background: url('../img/sprite.png') no-repeat 3px 5px;
}

.content{
    width: 100%;
    margin: 0 auto;
    border: 1px solid lightgray;
}

.header{
    /* display: flex; */
    /* justify-content: space-around; */
    margin-bottom: 10px;
}

.header li{
    display: inline-block;
    width: 50px;
    height: 25px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    border: 1px solid lightgray;
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: -1px;
    margin-top: -1px;
}

.header li:last-child{
    border-right: 0px;
}

.header li a {
    color: black;
    text-decoration: none;
    font-size: 14px;
}

.header li:hover {
    border-bottom: 0px;
}

.header li:hover a{
    color: green;
    font-weight: 700;
    text-decoration: underline;
}

.first div{
    display: inline-block;
}

.first div:nth-child(1){
    color: red;
    font-size: 15px;
    vertical-align: top;
    padding-left: 5px;
}

.first div:nth-child(3){
    width: 80px;
    vertical-align: top;
}

.first span{
    font-size: 15px;
    display: inline-block;
    padding-left: 5px;
}

.first div:nth-of-type(3) span a{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}

.first div:nth-of-type(3) span:hover a{
    color:darkcyan
}

.first div span:nth-of-type(2){
    color: #C0353F;
    font-weight: 700;
    margin-top: 5px;
}

.first span:nth-of-type(3){
    margin: 3px 0px;
    font-weight: 700;
    color: gray;
    text-decoration: line-through;
}

.first span:nth-of-type(4){
    margin: 3px 0px;
    color: rgb(11, 106, 11);
}

.content-item{
    height: 30px;
}

.content-item span{
    display: inline-block;
}

.one{
    font-size: 15px;
    line-height: 30px;
    padding-left: 5px;
}

.content div:nth-of-type(3) .one,
.content div:nth-of-type(5) .one,
.content div:nth-of-type(7) .one
{
    color: red;
} 

.two{
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
}

.two a{
    font-size: 15px;
    text-decoration: none;
    color: #000;
}

.two:hover a{
    color:darkcyan
}

.line {
    width: 230px;
    height: 0px;
    border-top: 1px solid lightgray;
    margin: 5px auto;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px #F0F0F0;
}
Jsy_997
关注
专栏目录
CSS中盒子样式设置及浮动特性
yoghurt&girl的博客
06-06 2411
在CSS3中我们新增了圆角边框样式，这样我们可以使盒子变为圆角。注意：默认的是外阴影，但是不可以写outset这个单词，否则会造成外阴影无效。盒子阴影不占用空间，不会影响盒子的排列。 效果图： 在CSS3中我们可以通过box-sizing来指定盒子模型，它有两个属性值，content-box、border-box。盒子计算分为了两种情况：box-sizing：content-box（盒子大小）：width+padding+border 以前盒子默认大小组成border-sizing：border
CSS盒子模型及属性
annotation_PLZ的博客
07-24 2012
盒⼦模型 是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。...
CSS:盒子常用属性
weixin_34148340的博客
03-08 154
摘自：http://www.w3school.com.cn overflow 属性 CSS clip 属性 z-index 属性   CSS overflow 属性 CSS 参考手册 定义和用法 overflow 属性规定当内容溢出元素框时发生的事情。 说明 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机...
CSS属性-盒模型
最新发布
qq_72013756的博客
08-22 1208
从零开始学前端
CSS盒属性
Han_zeyang的博客
07-01 152
box原尺寸为200px*150px，由于添加了padding，所以四个方向均添加了20px的填充大小。条件：1、 将一个块级元素设置为左浮动，它会带动它下面的块级元素，将这个下面的块级元素拉扯到与本元素同行的位置。3、被拉扯上去的块级元素若不希望与其他块级元素在同一行，如何解决：将被拉扯上去的块级元素设置清除浮动。1、边框粗细：border-top-width设置顶部边框粗细；例：margin：5px 10px 15px 20px;上边界5px ,右边界10px，下边界15px，左边界20px。
css中盒子模型的属性
当路danglu0010
05-19 1936
css中盒子模型的属性
js控制CSS样式属性语法对照表
12-12
CSS与JS紧密配合，为...下面就是JS 控制CSS样式表的语法对照： 盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border border border-bottom borderBottom border-botto
css样式表中文手册
10-17
2. **属性（Properties）**：属性是CSS样式的一部分，定义了元素的视觉特性，如`color`用于设置文本颜色，`font-size`用于设置字体大小。 3. **值（Values）**：属性后面跟随的值，指定了属性的具体设置，如`red`是...
css样式标签和js语法属性区别
01-19
盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle ...
CSS盒子模型
m0_64365419的博客
12-06 1076
盒子模型： 将html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距，和文字内容如下图所示：border可以设置元素的边框，边框由三部分组成：语法: 举例： 注意：类似于上述实例中的这种指定盒子模型的方法是不对的，没有指定盒子的样式，其他指定的颜色和宽度也不会被显示出来。修改上述，将盒子的边框设置为实线型： 显示如下：对于边框的样式CSS提供了非常多： 边框的复合属性： 我们之前学过字体的复合属性写法，这种
盒子属性
weixin_30532369的博客
06-04 134
弹性布局 一个盒子，如果将其display属性设置为 flex ，该盒子变为弹性盒（弹性容器），该盒子的 所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅 仅是弹性盒中的弹性项目 。 属性： 1.flex-direction ：更改主轴方向 2.row 行默认值 3.row-reverse 反向主轴从右向左 4.column 列按主轴...
盒子的属性
weixin_55171701的博客
09-17 402
盒子的内外边距、边框、阴影
11.盒子属性
potato123232的博客
03-01 2219
盒子属性的常用css有边框，外边距，内边距与内容 上面这张图中border是边框，padding是内边距，margin是外边距，中间的1903 x 149是内容(content) 大部分的元素都可以使用盒子属性，不只有div可以使用 1边框 border 边框主要由三部分构成，边框宽度(粗细)(border-width)，边框样式(border-style)与边框颜色(border-color)，我们先感受一下 1.1border-color与border-width bord....
css基础，盒子属性，内容属性
qq_275487025的博客
08-06 1449
QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。 盒子模型： 每个HTML元素都可以看作装了东西的盒子 盒子具有宽度（width）和高度（height） 盒子里面的内容到盒子的边框之间的距离即填充（padding） 盒子本身有边框（border） 而盒子边框外和其他盒子之间，还有边界（margin） 内填充属性： 边框属性： ...
CSS盒子样式设置
GatesMa's blog
12-24 2426
盒子： 所有的元素-&gt; 矩形的盒子 内容 鞋子 内边距 报纸 盒子框 鞋盒 纸盒子 外边距 鞋盒 鞋盒之间的距离 .box{ border: 5px solid black 盒子与内容之间的距离 padding：10px 上下左右 10 padding: 20px 50px 上下20 左右50 padding：20 50 60 上20 左右...
CSS_弹性盒子模型
qq_55961861的博客
08-09 476
CSS_弹性盒子模型！
CSS样式大全之盒子模型
m0_56063262的博客
12-12 328
原来在标准流的位置继续占有，后面盒子该怎样还是怎样不向前占据它的位置它是相对于自己原来的位置来移动的（参照点是自己原来的位置）1.父级没有高度 2.子盒子浮动了 3.影响下面布局了(浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流)则以最近一级的有定位祖先元素为参考点移动位置
CSS与JS样式属性对照表
"这篇资源提供了一个CSS和JavaScript中盒子模型及颜色背景属性的标签和style属性对照表，方便JavaScript开发者理解和应用这些样式属性。" 在Web开发中，CSS（层叠样式表）和JavaScript常常被用来控制网页元素的外观...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值