关于css阴影和浮动
盒子阴影box-shadow
box-shadow:0 0 1px #000 inset;
水平 垂直 模糊 颜色 ;
[1] inset代表框内阴影,不加inset代表框外阴影
[2]第1个值为0时,代表左右边框阴影为1px范围
第1个值为正整数 代表左边框阴影
第1个值为负整数 代表右边框阴影
同理
第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置
(注意:box-shadow:0 0 10px 颜色 ;四周发光;)
四、 float浮动问题
[1] 元素的高度是由他的子元素来决定的,当一个元素的子元素都浮动后该元素就没有高度了
[2] 当一个元素float 以后它的父亲,和兄弟认为它不存了
它不再参与父亲高度的计算
兄弟会占据他原来的位置
[3] 它的宽度就不再独自占一行而是由他的文字(内容的宽度)来决定。
[4] 不管怎么float 它都不会超过父亲的范围。
[5] 谁先float 谁优先靠在父亲元素的左侧或者右侧(html标签在前面,就是先)
[6]只要浮动元素前面有 内容无论行内还是块级浮动元素都会另起一行;
[7]行内元素设置float 以后会转换为块级别元素
[8]浮动元素都是从父亲的左侧或者右侧开始水平排列 ,如果父亲元素宽度容不下该元素,该元素就会另起一行
[9] clear:left;指该元素左边不准出现浮动元素
clear:right 右边不准出现浮动元素
clear:both 该元素左右都不准出现浮动元素(无论怎样单独占一行)
[10]只有父亲元素最后一个元素没有浮动 ,父亲元素的背景就会包括所有的子元素
解决子元素都浮动后父亲元素没有高度的办法
给该父亲元素添加 clearfix class名
.clearfix:after{ content:""; display:block; clear:both; height:0; visiblity:hidden;}
清除浮动的几种方法:
下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
1,父级div定义 height
关于css阴影和浮动的更多相关文章
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- [CSS]float&clear浮动
CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可取的值 ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...
随机推荐
- LeetCode.1103-向人们分发糖果(Distribute Candies to People)
这是小川的第393次更新,第425篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第256题(顺位题号是1103).我们通过以下方式向一排n = num_people个人分 ...
- URLOS开发基础教程——docker容器的使用方法
URLOS本是基于docker容器运行,在入门URLOS开发之前,我们首先需要掌握docker的相关基础知识,本篇就以docker容器的基本使用方法为例,快速的让大家对docker有一个全面的印象. ...
- Oracle 看出表结构与属性、表空间设计
1.Oracle 查看表空间 SELECT b.comments as 注释, a.column_name as 列名, a.data_type || '(' || a.data_length || ...
- 【机器学习】Learning to Rank入门小结 + 漫谈
Learning to Rank入门小结 + 漫谈 Learning to Rank入门小结 Table of Contents 1 前言 2 LTR流程 3 训练数据的获取4 特征抽取 3.1 人工 ...
- 语言模型评价指标Perplexity
在信息论中,perplexity(困惑度)用来度量一个概率分布或概率模型预测样本的好坏程度.它也可以用来比较两个概率分布或概率模型.(应该是比较两者在预测样本上的优劣)低困惑度的概率分布模型或概率模型 ...
- MYSQL—第一部分(简介和windows版本的安装)
一.概述 1.什么是数据库 ? 答:数据的仓库,如:在自己编写的程序中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQLServe ...
- 有人向你扔了一个bug,哈哈哈哈
有人向你扔了一个bug. "26楼会议室的灯亮着.它应该是熄灭着的." bug的备注里写道"你应该能在5分钟内搞定,只要按一下开关就好了."你去了26楼的会议室 ...
- Laravel之杂记
1.composer设置国内镜像加速 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 2 ...
- Django项目运行端口被占用
error:以一种访问权限不允许的方式做了一个访问套接字的尝试,是8000端口被其他程序占用了,杀掉占用的程序就可以 (1)查找哪个进程占用了8000端口 `E:\sign_system\guest& ...
- springboot mongodb jpa常用方法整理
官方文档https://docs.spring.io/spring-data/data-mongodb/docs/current/reference/html/index.html 查询: ***** ...