zoukankan      html  css  js  c++  java

  • Java学习笔记 第十三章 CSS

    JAVA学习笔记第十三章

    13.CSS

    image-20210613143628973

    13.1CSS书写方式

    【1】内联样式

    image-20210613144039989

    【2】内部样式

    image-20210613144211244

    【3】外部样式

    有多个html页面需要用到该样式，可以在css文件夹下新建css文件mystyle.css

    image-20210613144450215

    在html文件中通过link导入css

    image-20210613144338739

    【4】实际开发中常用第三种方式，这种方式真正做到了元素页面和样式分离

    【5】三种方式的优先级：就近原则

    13.2选择器和样式

    image-20210613144915308

    13.2.1基本选择器

    image-20210613145048943

    image-20210613145125783

    image-20210613145151725

    【4】优先级别：id选择器>class选择器>元素选择器

    13.2.2关系选择器

    image-20210613151204849

    image-20210613151359370

    image-20210613151415097

    13.2.3属性选择器

    image-20210613151557337

    13.2.4伪类选择器

    image-20210613151758229

    image-20210613151847419

    13.2.5模拟百度首页

    image-20210613185459359

    image-20210613185347477

    13.2.6浮动

    image-20210613185635265

    image-20210613190537541

    image-20210613190558642

    代码：

    image-20210613190240400

    效果：

    image-20210613190215313

    image-20210613190659509

    image-20210613190718991

    给绿色和橙色div加上浮动的效果：float: left

    image-20210613190912955

    给黄色div设置浮动效果：

    image-20210613191012479

    现在在大的div下面添加一个div

    image-20210613191124815

    image-20210613191146047

    用浮动要考虑影响，看看是否对其他元素造成影响

    消除浮动影响：

    • 方式一：添加overflow: hidden

    image-20210613191337034

    • 方式二：添加高度

    image-20210613191440901

    • 方式三：对需要消除浮动影响的div加上clear: both

    image-20210613191530265

    13.2.7定位

    image-20210613192600782

    【1】静态定位static：一般静态定位可以不写static

    image-20210613191755899

    【2】相对定位relative：优先级：左上>右下

    image-20210613192031701

    应用场合：

    • 元素在小范围移动的时候
    • 结合绝对定位使用

    z-index的使用：相对于屏幕的方向是z轴，可以控制那个在上层、下层

    image-20210613192526745

    image-20210613192358398

    image-20210613192452959

    【3】绝对定位absolute：

    image-20210613192927597

    image-20210613192951153

    image-20210613193042834

    为了使蓝色的方块在粉色块内移动，在outer可以设置一个相对定位

    image-20210613193202319

    image-20210613193235014

    这个绝对定位会先向上一层一层找父节点是否有定位，找到body也没有定位的话，会相对body进行绝对定位

    如果父级点有相对定位、绝对定位、固定定位，但是一般会配合父级为相对定位，当前元素为绝对定位，这样当前元素会围绕父级元素位置进行变化。且都会释放原来的位置，其他元素会占用原来的位置。

    开发中：父级结点使用relative，子级结点使用absolute

    【4】固定定位fixed：

    右侧的导航栏

    image-20210613193819313

    image-20210613193912756

    应用场合：在页面过长的时候，将某个元素固定在浏览器的位置上，当拉动滚动条的时候，这个元素的位置不动

    13.3盒子模型

    理解蓝色区域为一个盒子

    image-20210613194124839

    image-20210613194257739

    image-20210613194330259

    image-20210613203653653

    image-20210613204137676

    image-20210613204403297

    案例：12306

    image-20210613204826847

    image-20210613204856608

    image-20210613204943652
  • 相关阅读:
    ES-- Elasticsearch粗略分析
    springMVC之@Request
    Spring Boot入门
    反射四（动态代理）
    反射三（泛型）
    反射二（字段）
    反射一（方法）
    nutch和solr建立搜索引擎基础（单机版）
    Cinnamon桌面是怎么回事儿
    开启属于你的GNOME桌面
  • 原文地址：https://www.cnblogs.com/wrrr/p/14881160.html
Copyright © 2011-2022 走看看