html+css
html与css基础知识和常见的一些问题
Codingwithlife
对人真诚,对事热忱,codeing...
展开
-
flex布局与响应式适配
弹性容器:设置为弹性容器的方法:display:flex;里面的子元素会按照弹性布局弹性子元素:弹性容器里的直接子元素(第一层子元素,后代元素不算);子元素:默认排列成一行,不会换行,如果父元素宽度不够,会发生按比例压缩如果父元素高度不够,子元素高度会溢出弹性布局属性:主轴:flex-direction: ; 设置主轴方向row; 默认值,按行排列,从左到右row-reverse;column; 按列排列 从上到下主轴上元素的对齐方式justify-content:start;原创 2020-11-03 21:14:07 · 974 阅读 · 0 评论 -
img和background引入图片的区别
1. 是否占位background-image是背景图片,是css的一个样式,不占位;<img />是dom元素,它是一个图片,是html的一个标签,占位;2.是否会被搜索引擎识别img会被搜索引擎识别,background不会。所以一些重要的图片内容建议使用img标签引用,一些修饰性的建议使用背景属性引用;3.加载顺序问题在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签im原创 2020-10-28 19:40:01 · 685 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-sty原创 2020-10-26 15:06:00 · 84 阅读 · 0 评论 -
双飞翼布局与圣杯布局具体实现
1、双飞翼布局 由三列组成,两端固定,中间自适应。 双飞翼布局的优点: (1)兼容性好,兼容所有主流浏览器,包括万恶的IE6。 (2)因为在DOM中center_panel在三列结构的最前面,因此可以实现主要内容的优先加载。<style> .container{ margin: auto; overflow: hidden; width: 800...原创 2020-07-26 14:53:47 · 212 阅读 · 0 评论 -
css伪类与伪元素笔记
1、伪类伪类:专门用来表示元素的一种特殊状态常用伪类选择器(1)a标签:a:link/:visited/:hover/:active(注意顺序)(2):focus 获得焦点(3):first-child/:last-child/:nth-child(number)关于a标签:a:link,定义正常链接的样式;a:visited,定义已访问过链接的样式;a:hover,定义鼠标悬浮在链接上时的样式;a:active,定义鼠标点击链接时的样式。1 .定义超链接样式的顺...原创 2020-07-26 13:37:10 · 98 阅读 · 0 评论 -
BFC理解
BFC理解1、BFC布局与普通文档流布局区别普通文档流布局规则 1.浮动的元素是不会被父级计算高度 2.非浮动元素会覆盖浮动元素的位置 3.margin会传递给父级 4.两个相邻元素上下margin会重叠BFC布局规则1.浮动的元素会被父级计算高度(父级触发了BFC)2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)3.margin不会传递给父级(父级触发了BFC)4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)2、BFC解决原创 2020-07-18 18:49:06 · 111 阅读 · 0 评论 -
html+css网页布局积累
1.以图换字实现网页logo(以淘宝网为例)<!DOCTYPE html><html><head> <title></title> <style type="text/css"> h1 a{ display: block; width:143px; height:59px; background: url(logo.png) center no-repeat;/*图片作为背景图片*/ te原创 2020-07-18 17:20:15 · 788 阅读 · 1 评论 -
两栏布局的四种实现方法
两栏布局这个设置宽高浮动/绝对定位。一个自适应不设置宽,只设置高度,自适应的那个用margin留出固定宽度那个盒子的空间就可以。原创 2020-07-16 23:29:54 · 3630 阅读 · 0 评论 -
使用精灵图实现滑动门效果
使用精灵图实现滑动门的原理很简单,这是代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>滑动门-测试</title> <style type="text/css"> a { display: inline-block; height: 33px; .原创 2020-07-16 17:21:24 · 324 阅读 · 0 评论 -
一个小案例让你学会使用CSS精灵图
精灵图的使用------很多小问题我们稍微一看就懂,比如静态网页中精灵图的使用这个问题。这时候如果能动手敲一敲代码练习一下,这个知识点在我们的学习过程中,就从“懂”的状态变成“会”的状态了。原创 2020-07-15 18:51:16 · 791 阅读 · 1 评论 -
HTML+CSS基础知识X-mind总结,附有链接和提取码免费下载
学习完html与css,今天写完了小米官网的静态页面,花费了不到两天时间。感觉对好多知识理解的不够深入,某一块出问题了,能想出办法改对,但是不知道深层次的原理。在接下来的三天时间,我会把小米首页再写两遍,提高自己的速度,还有及时总结出一些布局,浮动,样式之类的问题,和相应的解决方案。如果有在用小米官网进行静态页面实战的,有什么问题都可以来和我交流,互相帮助,共同加油????...原创 2020-07-08 00:44:30 · 252 阅读 · 2 评论 -
box-sizing理解
box-sizing的三个属性content-box 默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / heightborder-box 重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE原创 2020-07-07 10:42:33 · 812 阅读 · 0 评论 -
听说面试问主流浏览器,看看都有那几个
主流浏览器及其内核主流浏览器有两个必须具备的特点占有一定的市场份额必须有独立研发的内核大多数占有一定市场份额的常用浏览器都没有自己独立研发的内核,如QQ浏览器,360浏览器等。浏览器的内核主要作用是代码识别运行,主要有渲染引擎(语法规则和渲染),js引擎,和其他模块。浏览器内核具体负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览原创 2020-07-07 09:16:32 · 248 阅读 · 0 评论 -
CSS盒子模型理解技巧
可以把盒子模型的要素看成一个快递包裹????**content(内容)相当于包裹里的物品padding(内边距)相当于物品外面的填充物,海绵,泡沫板之类border(边框)相当于包裹外包装盒margin(外边距)相当于该包裹与其他包裹间的间隙...原创 2020-07-05 16:08:23 · 67 阅读 · 0 评论 -
CSS元素的隐藏
visibility:hiddenopacity:0设置透明度这两种会将元素内容隐藏,但物理空间实际存在。display:none隐藏元素内容,不保留物理空间原创 2020-07-05 16:00:01 · 87 阅读 · 0 评论 -
用伪元素做分割线
<div id="header"> ----------设置给定的高度,宽度100% <div class="header">--------------设置给定高度、宽度,设置居中 <div class="header_left">------------float:left;设置宽度,高度一般和父类相同 内容(ul li span)----------line-height=高度,设置居中</di...原创 2020-07-05 10:13:07 · 1204 阅读 · 0 评论 -
网页布局基础知识积累
一、页面布局常用html标签div无意义块状元素 span无意义行内元素 p段落标签 ul无序列表 li列表项 a超链接 i斜体 b加粗二:css选择器id选择器#id 类选择器.class 关系选择器div p、div>p、div,p 伪类选择器:hover 结构伪类选择器:after、:before、:nth-child(n)三:部分属性(比较简单)四:页面布局属性(很重要!)定位属性:positon 布局属性:display 浮动属性:float、c原创 2020-07-05 09:35:05 · 462 阅读 · 0 评论 -
网页头部实现水平居中(margin:auto)需要知道的
在做一些官网时,我发现了大多数官网的header部分都会用到水平居中。但是对于一些刚开始学习静态网页布局的同学来说,使用margin:auto的时候,知道这其中的原理是很有必要的。在块级元素设置width值的情况下,设置其margin:auto;可以在父级元素中实现水平居中。margin:0 auto 不能实现水平居中的原因解析1. 需要居中的元素没有设置宽度margin:0 auto 中auto的意思是根据元素左右宽度自适应,但是在块元素不设置宽度width的情况下,宽度width默认是100原创 2020-07-04 19:37:01 · 2133 阅读 · 1 评论 -
vertical-align实现图片和文字水平对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。方法一:设置各对象的vertical-align属性,这个属性有baseline(基线对齐)、top(顶端对齐)、middle(中线对齐)和bottom(底端对齐)。其中第一个baseline基线对齐,基线可以理解为小时候写拼音,大多数字母在四线三格中第二个的底线。在中文里,基线通常在文字底部往上1/5位置,这个取值对图片和文字对齐意义不大。top,是指当前元素与本行中最高的原创 2020-07-03 23:55:44 · 932 阅读 · 0 评论 -
HTML+CSS之自学初识CSS布局
前言举个例子,建筑师在设计房屋的时候,需要丈量开发地的尺寸,以及每幢房屋相对于其他房屋的位置。在css布局中,似乎也是这样开始的。我们也会去区分每个元素的尺寸和定位,力争完美的实现整个设计稿。所以,布局首先应该从定位和尺寸开始谈起。定位定位的概念就是定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,可是浏览器窗口本身。另外还有浮动,其实浮动并不完全算是定位,它的特性非常的神奇,在布局中也经常被广泛的应用。通俗的说,定位实际上就是实现指定元素摆放到页面的任意位置。原创 2020-06-28 15:06:26 · 245 阅读 · 3 评论