首页 > 其他分享 >黑马pink css6

黑马pink css6

时间:2023-12-26 16:48:39浏览次数:41  
标签:pink 浮动 位置 盒子 css6 父级 元素 网页 黑马

盒子的圆角边框:

圆形和圆角矩形的设置方法:

盒子阴影:不占用空间

文字阴影:用得不多

网页布局的三种方式:
标准流:占用一行或共用一行
浮动
定位
实际开发要用这三种方式

网页布局第一准则:多个块级元素纵向排列用标准流,多个块级元素横向排列用浮动

浮动:将盒子移到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动特性(重难点):

  1. 脱离标准流的控制移动到指定位置,俗称脱标
  2. 浮动的盒子不再保留原先的位置(可能会出现重叠)
  3. 如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列。
  4. 浮动元素会具有行内块元素的特性(如果行内元素有了浮动,则不需要转换为行内块元素就能够具有宽度和高度)

为了约束浮动元素位置,网页一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
理论上一个盒子浮动了,其余兄弟也要设置浮动,不然会出现很多奇怪的问题。

网页布局第二准则:先设置盒子大小,之后设置盒子的位置

为什么要清除浮动:
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占用位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
清除浮动的方法:
1.额外标签法,也称为隔墙法,时W3C推荐的方法(新添加的元素必须是块级元素)
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
为什么要清除浮动:
1.父级没高度
2.子盒子浮动了
3.影响下面布局了,我们就要清除浮动了

标签:pink,浮动,位置,盒子,css6,父级,元素,网页,黑马
From: https://www.cnblogs.com/SKEZhi/p/17928035.html

相关文章

  • 前端学习笔记DAY3 HTML5基础(3)(b站pink老师)
    ​二.HTML标签6.表格标签1.1表格的主要作用表格不是用来布局页面的,而是用来展示数据的。1.2表格的基本语法<table><tr><td>单元格内的文字</td>...</tr>...</table>(1).<table></table>是用于定义表格的标签。(2).<tr></tr>标签用于定义表格中的行,必须嵌套在......
  • Mybatis(黑马)
    1.框架概述课程介绍三层架构和ssm框架的对应关系jdbc操作数据库的问题分析jdbc代码回顾javapublicstaticvoidmain(String[]args){Connectionconnection=null;PreparedStatementpreparedStatement=null;ResultSetresultSet=null;try{//加载数据库......
  • 前端学习笔记DAY2 HTML5基础(2)(b站pink老师)
    二.HTML标签4.HTML常用标签4.1标签语义学习标签的重点是记住每个标签的语义。就是指标签的含义,即这个标签是用来干嘛的。根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。※4.2标题标签<h1>-<h6>HTML提供了6个等级的网页标题,即<h1>-<h6>。......
  • 前端学习DAY1 HTML5基础(1)(b站pink老师)
    一、HTML简介1.网页 1.1什么是网页  网站是网页的集合,网页是网站中的一“页”(构成网站的基本元素)。 网页由图片、链接、文字、声音、视频等元素构成,通常是HTML格式的文件(.htm.或html后缀),通过浏览器来阅读。 1.2 什么是HTMLHTML(超文本标记语言),它是用来描述网页的......
  • Python:函数综合案例-黑马ATM
    综合案例:黑马ATM主菜单查询余额效果存取款效果#总额totaltotal=5000000#定义None影响不大,可以不定义name=None#要求客户输入姓名name=input("请输入您姓名:")#菜单提示defmenu():print("-"*19+"主菜单"+"-"*19)print(f"{name},您......
  • 递归时间复杂度---黑马程序员
    1.主定理求时间复杂度  展开求时间复杂度 ......
  • 黑马java基础简记
    day02——数据类型、运算符需要我们注意的是,随便写一个整数或者小数的字面量,它也是有默认数据类型的-比如23,它默认就为int类型;如果加上后缀L,则为long类型;-比如23.8,它默认为double类型;如果加上后缀F,则为float类型; //如果希望随便写一个整型字面量是long类型的,需要在其后......
  • vulnhub-Pinky's Palace v3
    在夏令营做的一个靶机,还是挺有意思的,也就做了我一天而已(菜没办法),这个靶机是当时夏令营老师布置的一道题,但是后面实在不会做就去网上搜了wp,才知道原型是Pinky'sPalacev3。Pinky'sPalacev3(flag在文章尾)打开靶机和kali,将靶机和kali设为同一网段。nmap扫到靶机ip为kali:192.16......
  • 数据结构与算法之单链表-----黑马程序员(26-35)
    1.链表的概念在计算机科学中,链表是数据元素的线性集合,其每个元素都指向下一个元素,元素储存上并不连续。 创建链表如图所示和相关代码publicclassdanlianbiao{privateNodehead=null;//头部第一个结点privatestaticclassNode{//后面的每个结点intvalue;Nodene......
  • Dom事件基础(pink老师课程笔记)
    事件监听(绑定)事件和事件监听事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等语法元素对象......