CSS基础3

最新推荐文章于 2023-08-18 20:40:23 发布

南夏繁笙

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量151

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45770470/article/details/109128806

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS基础3

相信相信的力量，严于律己

文章目录

CSS基础3

内容居中

必须指定盒子的宽度，
左右外边距设为auto

margin： 10px auto 10px auto
/**指定盒子宽度，将左右两侧的外边距设置为auto*/

注:行内块元素或行内元素水平居中，给其父元素添加text-align即可

圆角边框

border-radius: length;设置元素的外边框圆角,参数值可以为数值和百分比
分开写的话border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

设置成圆

先得到正方形，然后数值修改为边长的一半，或者直接写为50%

设置成圆角矩形

先得到矩形，然后设置为高度的一半。

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset
color多用rgba(0,0,0,.3)
在鼠标经过时盒子出现阴影 div：hover

文字阴影

text-shadow: h-shadow v-shadow blur color;

浮动

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

浮动元素的重要特性：

1.已经脱离了标准普通流的控制，浮动的盒子不在保留原先的位置。

2.多个盒子都设置了浮动，则会按照属性值一行内显示并且顶端对齐排列。

3.浮动元素会具有行内块元素特性任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度。

浮动元素与标准流父级搭配使用

在设置样式时注意权重，尽量逐层选择，会避免一些权重问题

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>
<style>
    .box .last {
        margin-right: 0;
    }
    /** .box .last 中间要有空格*/
	.box li {
        margin-right: 14px;
    }
<style> 
/**要想4不加边框，不能直接.last  */

清除浮动

清除盒子浮动策略：闭合浮动
在这里插入图片描述

/**伪元素清除浮动*/
.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

/**双伪元素清除浮动*/
 .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

常见图片格式

jpg	高清颜色较多，高清	产品类图片多用jpg
gif	最多只能存储256色	常用于图片动画效果
png	结合了GIF和JPG特点	想要切成背景透明的图片，选择Png格式
PSD	Photoshop专用格式	可直接复制文字和测量大小距离

图层切图：用ps直接导出png，注意文字和图片是两个图层时，要先shift选中两个图层在合并(ctrl+E)
切片切图：利用切片工具手动划出，导出选中图片
（文件菜单–>导出–>存储为web设备所用格式–>选择我们要的图片格式–>存储）
插件切图 Cutterman直接选中就能切

南夏繁笙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS基础3

文章目录内容居中圆角边框设置成圆盒子阴影文字阴影浮动内容居中必须指定盒子的宽度，左右外边距设为automargin： 10px auto 10px auto/**指定盒子宽度，将左右两侧的外边距设置为auto*/注:行内块元素或行内元素水平居中，给其父元素添加text-align即可圆角边框border-radius: length;设置元素的外边框圆角,参数值可以为数值和百分比分开写的话border-top-left-radius、border-top-right-radius、bor
复制链接

扫一扫