webBasic_day04_CSS_overflow_display_float_position(absolute, relative)

最新推荐文章于 2023-06-01 16:54:51 发布
最新推荐文章于 2023-06-01 16:54:51 发布
阅读量224 收藏
点赞数
分类专栏： webBasic 文章标签： webBasic_day04_CSS_overflow_di
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CXZ___deboke/article/details/79591686
版权

day04

案例:二级菜单的样式

    <body>
        <div id="leftsidebar_box">
            <ul>
                <!--与li同级的ul是二级菜单  -->
                <li class="cmenu1 menu">我的订单
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>全部订单</li>
                    <li>待付款</li>
                    <li>待收货</li>
                    <li>待评价</li>
                    <li>退货退款</li>
                </ul>

                <li class="cmenu2 menu">我的优惠券
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>我的优惠券</li>
                </ul>

                <li class="cmenu3 menu">收货地址
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>地址管理</li>
                </ul>

                <li class="cmenu4 menu">账号管理
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>我的信息</li>
                    <li>安全管理</li>
                </ul>
            </ul>
        </div>
    </body>


    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    li{
    /* 去掉li前面的黑点 */
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #808080;
    }
    #leftsidebar_box {
        width: 160px;
    }

    .cmenu1{
        background-image: url("../images/myOrder/myOrder.png");
    }
    .cmenu2{
        background-image: url("../images/myOrder/pcenter_icon1.png");
    }
    .cmenu3{
        background-image: url(../images/myOrder/pcenter_icon2.png);
    }
    .cmenu4{
        background-image: url(../images/myOrder/pcenter_icon3.png);
    }
    .menu{
        background-color: rgb(10,161,237);
        height: 36px;
        color: #f5f5f5;
        font-size: 14px;
        font-weight: bold;
        font-family: "黑体";
        background-repeat: no-repeat;
        padding-left: 40px;
        /* 文本垂直居中 */
        line-height: 36px;
        background-position: 10px center;
        margin-bottom: 10px;
    }
    .submenu{
        background-color: #fff;
        padding-left: 40px;
        margin-bottom: 10px;
    }
    .submenu>li{
        line-height: 30px;
        font-size: 14px;
        font-family: "黑体";
        color:#808080;
    }

    </style>

5. 边框属性 border

    border:1px solid #006699;
    border-width:1px;
    border-style:solid;
    border-color:#006699;

    border-top:上边框
    border-right:
    border-bottom:
    border-left:

    border-top-width:
    ...

溢出属性

  • overflow:溢出

    • hidden 溢出部分隐藏
    • visiable 溢出部分显示
    • scroll 溢出部分显示滚动条

复杂属性

display 控制元素的显示方式

  1. display:none 隐藏标签,可以写在内联样式中
  2. display:block;按块级标签进行显示
  3. display:inline;按照行级标签显示,基本不用!

浮动,把块级元素在一行中显示

float:left ,把元素浮动起来之后往左排列

float:right,把元素浮动起来之后往右排列

clear:both,清除浮动

总结

一旦元素设置了浮动属性,

当前元素将会脱离默认文档流

在默认文档流之上(上一层)进行渲染绘制

同时,此元素先前的位置将会被其它元素占用

clear:both,是让本元素不去占用浮动元素原来的位置

或者说不让本元素被浮动的元素覆盖

定位

position:absolute;绝对定位

position:relative;相对定位

使用定位的要点

  1. 一个元素想使用定位,父级元素必须有position:relative;如果没有,那么子元素会逐层向外寻找有position:relative;的包裹元素.并以这个包裹元素为参照物,使用top left等属性.如果都没有,以body为参照物
  2. postion:absolute原位置会被下面的元素占用
  3. position:relative;原位置被保留,不会被下面的元素占用
  4. top left right bottom

总结

使用定位,一定要选好参照物,多个定位相互覆盖,需要考虑z-index属性(可以理解为楼层)

postion:absolute是完全脱离默认文档流,原位置会被其他元素占用

position:relative;不是完全脱离默认文档流,原位置不会被其他元素占用

position:fixed;相对浏览器窗口定位

CXZ___deboke
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
stock_day.csv
07-21
pandas stock_day.csv 使用pandas对股票数据进行分析，基础入门篇，股票样本，，主要熟悉pandas的基本操作及缺失值处理
【写给大家看的CSS】定位元素：使用position/display布局
weixin_34218890的博客
11-18 116
引言        使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果。 知识点         1、relative、absolute的使用。 当子元素使用position:absolute时，父元素应该设置postion:relative以便使它作为决定定位段落的定位环境。在这里相对定位的元素    必须是绝对定位的祖先元素，才有资格成为定位环...
请教CSS中的position:relative;的作用
u010227447的专栏
06-07 8973
对于position的其它几个属性，我都搞懂了  引用 static : 　无特殊定位，对象遵循HTML定位规则  absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框  relative : 　对象不可层叠，但将依据left，right，top，
position和display的取值和用法
09-10 174
position设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确 position的值和作用： position的所有值：static(默认)、relative、absolute、fixed、inherit、（initial、unset、sticky） 1.static：始终处于文档流给予的位置，可以快速取消定位，让top，right，bottom，left...
position:relative的用法
热门推荐
波西塔塔博客
12-25 1万+
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素… 比如要实现商品细节图展示的效果，可以使用如...
css小技巧之浮动，居中，周围阴影，relative妙用
feinifi的博客
07-30 1334
css在布局和样式微调中，有很多小技巧，今天总结一些小妙招，这些方法基本上很好用，而且不会轻易弄混淆。 我们为了看出效果，将页面做了一些修饰，比如很多地方加上了边框，设置了背景色，主要是为了更直观的表现我们的效果。首先贴出一段主体的样式： /**reset*/ html,body,div,p,span,h1,h2,h3,h4,h5,h6,input{margin:0;padding:0;font-weight:normal;} #root{ width:1000px; margin...
DAY07_HTML&CSS
m0_57075290的博客
06-01 534
Html、Css
css_day02
bs_101的博客
05-29 77
文章目录css字体属性文字属性边框display盒子模型浮动解决浮动带来的影响 css 字体属性 <style> p{ font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif; /* 字体 */ font-size: 24px; /* 字体大小 */ fon
javaweb_day1_HTML&CSS
郭叶兵的博客
07-30 177
<!--注释内容--> <h1></h1>:标题标签 <hr />:水平线 <font size=”” color=””></font>字体标签 <b><b />粗体 <i><i />：斜...
Labview-Display.rar_day8eo_labview_labview 显示器
07-15
在这个"Labview-Display.rar_day8eo_labview_labview 显示器"压缩包中，我们关注的重点是关于LabVIEW中的显示器编程，特别是与"Labview Display"相关的源程序。 在LabVIEW中，显示器通常指的是用于呈现数据、图表或...
proj.rar_Day By Day
09-21
Give date of birth and which month You were born.Then by running this project you can get which day U born.
phu-c10.rar_One Day
09-14
【标题】"phu-c10.rar_One Day" 指的可能是一个关于电子工程或嵌入式系统的学习资源，其中包含多个项目示例。"One Day Some Nights SEEMS ABOUT" 这个描述可能是在暗示这个压缩包里的内容是围绕一天中的某个时间段...
计算机控制技术题库(附答案).doc
07-18
计算机
yolo数据集8：1：1分类
07-18
yolo数据集8：1：1分类
2023中国独角兽ceo调研报告：锐意精进，创赢未来-普华永道.pdf
07-18
2023中国独角兽ceo调研报告：锐意精进，创赢未来-普华永道
大前端技术与管理——饿了么移动性能可视化之路 共32页.pdf
最新发布
07-18
大前端技术与管理——饿了么移动性能可视化之路 共32页.pdf
大数据技术分享 Spark技术讲座 理论在现实世界中应用Apache Spark实现大规模频繁模式挖掘 共92页.pdf
07-18
大数据技术分享 Spark技术讲座 理论在现实世界中应用Apache Spark实现大规模频繁模式挖掘 共92页.pdf
lv_calendar_set_day_names
05-18
lv_calendar_set_day_names 函数是用来设置日历控件的星期名称的。它的函数原型为： ```c void lv_calendar_set_day_names(lv_obj_t * obj, const char ** day_names) ``` 其中，obj 是要设置的日历对象的指针，day_names 是一个指向指针数组的指针，指针数组的每个元素都是一个字符串，表示一周中每一天的名称。 例如，如果我们要将日历控件的星期名称设置为“周日”、“周一”、“周二”、“周三”、“周四”、“周五”和“周六”，则可以按如下方式调用 lv_calendar_set_day_names 函数： ```c const char * day_names[] = {"周日", "周一", "周二", "周三", "周四", "周五", "周六"}; lv_calendar_set_day_names(calendar, day_names); ``` 这样，日历控件的星期名称就会被设置为上述字符串数组中的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值