CSS（四）

6. float 浮动

　　left

　　right

　　设置浮动  脱离普通文档流

　　浮动元素都会变成块级元素  如果不设置宽度 会尽可能的窄

　　如果你使用浮动了 请将你的元素计算精确 如果不精确会有弊端！

7. clear 清除浮动

　　left

　　right

　　both 只用它就好了

　　就是让你脱离文档流的内容(float)回到文档中

　　推荐: 每次看见浮动都要记得清除浮动

三、布局

　　浮动布局

　　三列浮动布局

　　二列浮动布局

参考资料：https://www.w3cschool.cn/css/

时间： 2024-10-11 21:53:23

CSS（四）的相关文章

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g

CSS四种引入方式

第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种引入方式--> <div style="color: red;backg

css四种选择器总结

css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做为后端开发者来说,学好css样式也是快速入门各类框架的基础,也是做为一名全栈工程师必备的知 识,下面来说说css中重要的选择器,       在css中常见的选择器有四种常见,说到选择器就不得不说css引入文件的常见的三种方法,1,内联文件,2,外部文件,3.内嵌文件 ,其中三种常规的例子如下 1,

CSS四种定位及应用

定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道.不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦! 为什么要用定位? 那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟! 第一幅图, 小黄色块可以再图片上移动: 第二幅图, 左右箭头压住图片: 第三幅图, hot 再盒子外面多出一块

CSS 四个样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px

前台html基础标签2表单、超链接 css四种样式 7.7

一.html-表单部分 1.按钮: <input type="button"> 2.文本框: <input type="text"> 3.密码: <input type="password"> 4.单选: <input type="radio" id="male" name="sex" checked="checked">

Css四种样式

1. 2 3 4 5 6.

CSS(四)：背景+变形

background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效.可取值有 border-box | padding-box | content-box border-box:设置背景图片原点在边框的最左上角 1 .img{ 2 background-image:url(1.jpg); 3 background-repeat:no-repeat; 4 background-origin:border-box;

CSS 四种定位方式比较

定位比较 定位模式 是否脱标占有位置 是否可以边平移 移动位置基准 静态定位(static) 不脱标,正常模式 不可以 正常模式 相对定位(relative) 不脱标,占有位置 可以 相对自身位置移动 绝对定位(absolute) 完全脱标,不占位置 可以 相对于有定位的父级移动 固定定位(fixed) 完全脱标,不占位置 可以 相对于浏览器移动 原文地址:https://www.cnblogs.com/somethingnew/p/11841039.html

HTML分帧和CSS基本语法

分帧:简称框架 HTML 框架是划分窗口的技术 就是把一个窗口分隔成多个窗口 每个窗口显示不同的网页内容多用于后台 也叫做分帧 分帧的标签是: <frameset></frameset> 把窗口分成几份,就需要有对应的几个<frame>标签出现. 注意: 如果你在页面上写frameset 了那么就不能出现body体. 常用属性有: Cols  分列单位:可以写像素也可以写百分比,之后除上面内容外还可以写*(*代表剩余所有) Rows 分行单位:可以写像素也可以写百分比,