4595 lines
236 KiB
HTML
4595 lines
236 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="en" class="coal" dir="ltr">
|
||
<head>
|
||
<!-- Book generated using mdBook -->
|
||
<meta charset="UTF-8">
|
||
<title>css - Andrew's Blog</title>
|
||
|
||
|
||
<!-- Custom HTML head -->
|
||
|
||
<meta name="description" content="Andrew Ryan's Blog">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
<link rel="icon" href="../../favicon.svg">
|
||
<link rel="shortcut icon" href="../../favicon.png">
|
||
<link rel="stylesheet" href="../../css/variables.css">
|
||
<link rel="stylesheet" href="../../css/general.css">
|
||
<link rel="stylesheet" href="../../css/chrome.css">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
|
||
<link rel="stylesheet" href="../../fonts/fonts.css">
|
||
|
||
<!-- Highlight.js Stylesheets -->
|
||
<link rel="stylesheet" href="../../highlight.css">
|
||
<link rel="stylesheet" href="../../tomorrow-night.css">
|
||
<link rel="stylesheet" href="../../ayu-highlight.css">
|
||
|
||
<!-- Custom theme stylesheets -->
|
||
<link rel="stylesheet" href="../../src/style/custom.css">
|
||
|
||
<!-- MathJax -->
|
||
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
</head>
|
||
<body class="sidebar-visible no-js">
|
||
<div id="body-container">
|
||
<!-- Provide site root to javascript -->
|
||
<script>
|
||
var path_to_root = "../../";
|
||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "coal" : "coal";
|
||
</script>
|
||
|
||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||
<script>
|
||
try {
|
||
var theme = localStorage.getItem('mdbook-theme');
|
||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
||
|
||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
||
}
|
||
|
||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
||
}
|
||
} catch (e) { }
|
||
</script>
|
||
|
||
<!-- Set the theme before any content is loaded, prevents flash -->
|
||
<script>
|
||
var theme;
|
||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
||
if (theme === null || theme === undefined) { theme = default_theme; }
|
||
var html = document.querySelector('html');
|
||
html.classList.remove('coal')
|
||
html.classList.add(theme);
|
||
var body = document.querySelector('body');
|
||
body.classList.remove('no-js')
|
||
body.classList.add('js');
|
||
</script>
|
||
|
||
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
|
||
|
||
<!-- Hide / unhide sidebar before it is displayed -->
|
||
<script>
|
||
var body = document.querySelector('body');
|
||
var sidebar = null;
|
||
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
|
||
if (document.body.clientWidth >= 1080) {
|
||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||
sidebar = sidebar || 'visible';
|
||
} else {
|
||
sidebar = 'hidden';
|
||
}
|
||
sidebar_toggle.checked = sidebar === 'visible';
|
||
body.classList.remove('sidebar-visible');
|
||
body.classList.add("sidebar-" + sidebar);
|
||
</script>
|
||
|
||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||
<div class="sidebar-scrollbox">
|
||
<ol class="chapter"><li class="chapter-item affix "><a href="../../index.html">Andrew's Blog</a></li><li class="chapter-item "><a href="../../posts/linux/linux.html"><strong aria-hidden="true">1.</strong> linux</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/linux/install_linux.html"><strong aria-hidden="true">1.1.</strong> install linux</a></li><li class="chapter-item "><a href="../../posts/linux/bash_profile.html"><strong aria-hidden="true">1.2.</strong> bash profile</a></li><li class="chapter-item "><a href="../../posts/linux/command_list.html"><strong aria-hidden="true">1.3.</strong> command list</a></li><li class="chapter-item "><a href="../../posts/linux/git_guide.html"><strong aria-hidden="true">1.4.</strong> git guide</a></li><li class="chapter-item "><a href="../../posts/linux/tar.html"><strong aria-hidden="true">1.5.</strong> tar</a></li><li class="chapter-item "><a href="../../posts/linux/run_x86_elf_in_x64_setup.html"><strong aria-hidden="true">1.6.</strong> run x86 elf in x64 setup</a></li></ol></li><li class="chapter-item "><a href="../../posts/mac/mac.html"><strong aria-hidden="true">2.</strong> mac</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/mac/macos_profiles.html"><strong aria-hidden="true">2.1.</strong> macos profiles</a></li></ol></li><li class="chapter-item "><a href="../../posts/swift/swift.html"><strong aria-hidden="true">3.</strong> swift</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/swift/learn_swift.html"><strong aria-hidden="true">3.1.</strong> learn swift basics</a></li><li class="chapter-item "><a href="../../posts/swift/swift_extensions.html"><strong aria-hidden="true">3.2.</strong> Swift extensions</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_extension.html"><strong aria-hidden="true">3.3.</strong> SwiftUI extensions</a></li><li class="chapter-item "><a href="../../posts/swift/install_swift.html"><strong aria-hidden="true">3.4.</strong> install swift</a></li><li class="chapter-item "><a href="../../posts/swift/task_planner.html"><strong aria-hidden="true">3.5.</strong> implment task panner app with SwiftUI</a></li><li class="chapter-item "><a href="../../posts/swift/swift_cheat_sheet.html"><strong aria-hidden="true">3.6.</strong> Swift Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/swift/yinci_url.html"><strong aria-hidden="true">3.7.</strong> Personal privacy protocol</a></li><li class="chapter-item "><a href="../../posts/swift/swift_regular_exressions.html"><strong aria-hidden="true">3.8.</strong> Swift regular exressions</a></li><li class="chapter-item "><a href="../../posts/ios/how_to_create_beautiful_ios_charts_in_swift.html"><strong aria-hidden="true">3.9.</strong> How to Create Beautiful iOS Charts in鑱絊wift</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_source_code.html"><strong aria-hidden="true">3.10.</strong> SwiftUI source code</a></li><li class="chapter-item "><a href="../../posts/swift/use_swift_fetch_iciba_api.html"><strong aria-hidden="true">3.11.</strong> use swift fetch iciba API</a></li></ol></li><li class="chapter-item "><a href="../../posts/ios/ios.html"><strong aria-hidden="true">4.</strong> ios</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ios/cocaposd_setup_and_install_for_ios_project.html"><strong aria-hidden="true">4.1.</strong> cocaposd setup and install for ios project</a></li><li class="chapter-item "><a href="../../posts/ios/swiftui_show_gif_image.html"><strong aria-hidden="true">4.2.</strong> SwiftUI show gif image</a></li><li class="chapter-item "><a href="../../posts/ios/implement_task_planner_app.html"><strong aria-hidden="true">4.3.</strong> implement Task planner App</a></li></ol></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c.html"><strong aria-hidden="true">5.</strong> objective_c</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/objective_c/objective_c_cheat_sheet.html"><strong aria-hidden="true">5.1.</strong> Objective-C Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c_for_absolute_beginners_read_note.html"><strong aria-hidden="true">5.2.</strong> Objective-C Note</a></li></ol></li><li class="chapter-item "><a href="../../posts/dart/dart.html"><strong aria-hidden="true">6.</strong> dart</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/dart/flutter.html"><strong aria-hidden="true">6.1.</strong> Flutter Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/dart/dart_cheat_sheet.html"><strong aria-hidden="true">6.2.</strong> Dart Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/flutter/flutter_dev_test.html"><strong aria-hidden="true">6.3.</strong> Flutter dev test</a></li></ol></li><li class="chapter-item "><a href="../../posts/rust/rust.html"><strong aria-hidden="true">7.</strong> rust</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/rust/offline_use_rust.html"><strong aria-hidden="true">7.1.</strong> Offline use rust</a></li><li class="chapter-item "><a href="../../posts/rust/rust_grammer.html"><strong aria-hidden="true">7.2.</strong> rust grammar</a></li><li class="chapter-item "><a href="../../posts/rust/pase_string_and_decimal_conversion.html"><strong aria-hidden="true">7.3.</strong> pase string and decimal conversion</a></li><li class="chapter-item "><a href="../../posts/rust/parse_types.html"><strong aria-hidden="true">7.4.</strong> rust types</a></li><li class="chapter-item "><a href="../../posts/rust/rust_life_cycle.html"><strong aria-hidden="true">7.5.</strong> Rust life cycle</a></li><li class="chapter-item "><a href="../../posts/rust/rust_generic.html"><strong aria-hidden="true">7.6.</strong> rust generics</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implment_matrix.html"><strong aria-hidden="true">7.7.</strong> Rust implement matrix</a></li><li class="chapter-item "><a href="../../posts/rust/rust_sort.html"><strong aria-hidden="true">7.8.</strong> Rust implement sort algorithms</a></li><li class="chapter-item "><a href="../../posts/rust/implement_aes_encryption.html"><strong aria-hidden="true">7.9.</strong> Rust implement AEC encryption and decryption</a></li><li class="chapter-item "><a href="../../posts/rust/implement_trie_data_structure.html"><strong aria-hidden="true">7.10.</strong> implement trie data structure</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_tree.html"><strong aria-hidden="true">7.11.</strong> implement tree data_structure</a></li><li class="chapter-item "><a href="../../posts/rust/list_dir.html"><strong aria-hidden="true">7.12.</strong> list dir</a></li><li class="chapter-item "><a href="../../posts/rust/fast_way_to_implment_object_trait.html"><strong aria-hidden="true">7.13.</strong> fast way to implment object trait</a></li><li class="chapter-item "><a href="../../posts/rust/compress_rust_binary_size.html"><strong aria-hidden="true">7.14.</strong> compress rust binary size</a></li><li class="chapter-item "><a href="../../posts/rust/implment_file_upload_backend.html"><strong aria-hidden="true">7.15.</strong> impliment file upload</a></li><li class="chapter-item "><a href="../../posts/rust/this_is_add_post_cli_implementation_in_rust.html"><strong aria-hidden="true">7.16.</strong> this is add_post cli implementation in rust</a></li><li class="chapter-item "><a href="../../posts/rust/use_rust_implment_a_copyclipbord_cli.html"><strong aria-hidden="true">7.17.</strong> Use rust implment a copyclipbord CLI</a></li><li class="chapter-item "><a href="../../posts/rust/sqlite_database_add_delete_update_show_in_rust.html"><strong aria-hidden="true">7.18.</strong> sqlite database add delete update show in rust</a></li><li class="chapter-item "><a href="../../posts/rust/implementing_tokio_joinhandle_for_wasm.html"><strong aria-hidden="true">7.19.</strong> Implementing tokio JoinHandle for wasm</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html"><strong aria-hidden="true">7.20.</strong> rust implement a crate for encode and decode brainfuck and ook</a></li><li class="chapter-item "><a href="../../posts/rust/slint_builtin_elements.html"><strong aria-hidden="true">7.21.</strong> Slint Builtin Elements</a></li><li class="chapter-item "><a href="../../posts/rust/corporate_network_install_rust_on_windows.html"><strong aria-hidden="true">7.22.</strong> Corporate network install Rust on windows</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_file_how_to_judge_static_link_or_dynamic_link_in_macos.html"><strong aria-hidden="true">7.23.</strong> rust binary file how to judge static link or dynamic link in Macos</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_include_dir_and_get_contents.html"><strong aria-hidden="true">7.24.</strong> rust binary include dir and get contents</a></li><li class="chapter-item "><a href="../../posts/rust/rust_logger_non-block.html"><strong aria-hidden="true">7.25.</strong> rust logger non-block</a></li><li class="chapter-item "><a href="../../posts/rust/rust_connect_sql_server_database.html"><strong aria-hidden="true">7.26.</strong> rust connect sql server database</a></li><li class="chapter-item "><a href="../../posts/rust/rust_websocket_implment.html"><strong aria-hidden="true">7.27.</strong> rust websocket implment</a></li></ol></li><li class="chapter-item "><a href="../../posts/java/java.html"><strong aria-hidden="true">8.</strong> java</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/java/java_grammar.html"><strong aria-hidden="true">8.1.</strong> java grammar and codewar</a></li><li class="chapter-item "><a href="../../posts/java/run_jar.html"><strong aria-hidden="true">8.2.</strong> java run .jar</a></li><li class="chapter-item "><a href="../../posts/java/java_pomxml_add_defaultgoal_to_build.html"><strong aria-hidden="true">8.3.</strong> Java pomxml add defaultGoal to build</a></li><li class="chapter-item "><a href="../../posts/java/java_set_mvn_mirror.html"><strong aria-hidden="true">8.4.</strong> Java set mvn mirror</a></li></ol></li><li class="chapter-item "><a href="../../posts/python/python.html"><strong aria-hidden="true">9.</strong> python</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/python/convert_pesn.html"><strong aria-hidden="true">9.1.</strong> convert pesn</a></li><li class="chapter-item "><a href="../../posts/python/find_remove_dir.html"><strong aria-hidden="true">9.2.</strong> find and remove dir</a></li><li class="chapter-item "><a href="../../posts/python/timing_message.html"><strong aria-hidden="true">9.3.</strong> wechat send message</a></li><li class="chapter-item "><a href="../../posts/python/use_python_openpyxl_package_read_and_edit_excel_files.html"><strong aria-hidden="true">9.4.</strong> Use python openpyxl package read and edit excel files</a></li></ol></li><li class="chapter-item "><a href="../../posts/go/go.html"><strong aria-hidden="true">10.</strong> go</a></li><li class="chapter-item "><a href="../../posts/js/js.html"><strong aria-hidden="true">11.</strong> js</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/js/js_tutorial.html"><strong aria-hidden="true">11.1.</strong> js tutorial</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_map.html"><strong aria-hidden="true">11.2.</strong> ja map</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_math.html"><strong aria-hidden="true">11.3.</strong> js math</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_object.html"><strong aria-hidden="true">11.4.</strong> js object</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_set.html"><strong aria-hidden="true">11.5.</strong> js set</a></li><li class="chapter-item "><a href="../../posts/js/single_thread_and_asynchronous.html"><strong aria-hidden="true">11.6.</strong> single thread and asynchronous</a></li><li class="chapter-item "><a href="../../posts/js/this.html"><strong aria-hidden="true">11.7.</strong> js this</a></li><li class="chapter-item "><a href="../../posts/js/js_implment_aes.html"><strong aria-hidden="true">11.8.</strong> js implment aes</a></li><li class="chapter-item "><a href="../../posts/js/getting_started_with_ajax.html"><strong aria-hidden="true">11.9.</strong> getting started with ajax</a></li><li class="chapter-item "><a href="../../posts/js/BinarySearchTree.html"><strong aria-hidden="true">11.10.</strong> binary search tree</a></li><li class="chapter-item "><a href="../../posts/js/goole_zx.html"><strong aria-hidden="true">11.11.</strong> goole zx</a></li><li class="chapter-item "><a href="../../posts/js/es6.html"><strong aria-hidden="true">11.12.</strong> es6</a></li></ol></li><li class="chapter-item "><a href="../../posts/ruby/ruby.html"><strong aria-hidden="true">12.</strong> ruby</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ruby/rails_setup_env.html"><strong aria-hidden="true">12.1.</strong> ruby on rails setup environment</a></li><li class="chapter-item "><a href="../../posts/ruby/learn_ruby.html"><strong aria-hidden="true">12.2.</strong> learn ruby</a></li><li class="chapter-item "><a href="../../posts/ruby/ruby_note.html"><strong aria-hidden="true">12.3.</strong> Ruby Note</a></li><li class="chapter-item "><a href="../../posts/ruby/setup_ruby_for_ctf.html"><strong aria-hidden="true">12.4.</strong> Setup ruby for CTF</a></li></ol></li><li class="chapter-item "><a href="../../posts/react/react.html"><strong aria-hidden="true">13.</strong> react</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/react/react_life_cycle.html"><strong aria-hidden="true">13.1.</strong> react life cycle</a></li><li class="chapter-item "><a href="../../posts/react/react_router.html"><strong aria-hidden="true">13.2.</strong> react router</a></li><li class="chapter-item "><a href="../../posts/react/react_this.html"><strong aria-hidden="true">13.3.</strong> react this</a></li><li class="chapter-item "><a href="../../posts/react/react_interviw.html"><strong aria-hidden="true">13.4.</strong> react interview</a></li><li class="chapter-item "><a href="../../posts/react/important_react_interview.html"><strong aria-hidden="true">13.5.</strong> important react interview</a></li><li class="chapter-item "><a href="../../posts/react/react_quick_reference.html"><strong aria-hidden="true">13.6.</strong> react quick reference</a></li><li class="chapter-item "><a href="../../posts/react/redux_quick_reference.html"><strong aria-hidden="true">13.7.</strong> redux quick reference</a></li></ol></li><li class="chapter-item "><a href="../../posts/vue/vue.html"><strong aria-hidden="true">14.</strong> vue</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/vue/vue_ajax.html"><strong aria-hidden="true">14.1.</strong> vue ajax</a></li></ol></li><li class="chapter-item "><a href="../../posts/angular/angular.html"><strong aria-hidden="true">15.</strong> angular</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/angular/controller_communication.html"><strong aria-hidden="true">15.1.</strong> controller communication</a></li><li class="chapter-item "><a href="../../posts/angular/creating_custom_directives.html"><strong aria-hidden="true">15.2.</strong> creating custom directives</a></li><li class="chapter-item "><a href="../../posts/angular/directive_notes.html"><strong aria-hidden="true">15.3.</strong> directive notes</a></li><li class="chapter-item "><a href="../../posts/angular/directive_communication.html"><strong aria-hidden="true">15.4.</strong> directive communication</a></li><li class="chapter-item "><a href="../../posts/angular/post_params.html"><strong aria-hidden="true">15.5.</strong> post params</a></li><li class="chapter-item "><a href="../../posts/angular/read_json_angular.html"><strong aria-hidden="true">15.6.</strong> read json angular</a></li><li class="chapter-item "><a href="../../posts/angular/same_route_reload.html"><strong aria-hidden="true">15.7.</strong> same route reload</a></li></ol></li><li class="chapter-item expanded "><a href="../../posts/css/css.html" class="active"><strong aria-hidden="true">16.</strong> css</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/css/use_css_media.html"><strong aria-hidden="true">16.1.</strong> use css media</a></li></ol></li><li class="chapter-item "><a href="../../posts/php/php.html"><strong aria-hidden="true">17.</strong> php</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/php/for_php_string_implment_some_extemtion_functions.html"><strong aria-hidden="true">17.1.</strong> for php string implment some extemtion functions</a></li><li class="chapter-item "><a href="../../posts/php/php_cheatsheet.html"><strong aria-hidden="true">17.2.</strong> PHP cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/leetcode/leetcode.html"><strong aria-hidden="true">18.</strong> leetcode</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/leetcode/rust_leetcode.html"><strong aria-hidden="true">18.1.</strong> rust leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_codewar.html"><strong aria-hidden="true">18.2.</strong> rust codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/swift_codewar.html"><strong aria-hidden="true">18.3.</strong> swift codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/js_leetcode.html"><strong aria-hidden="true">18.4.</strong> js leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/java_leetcode.html"><strong aria-hidden="true">18.5.</strong> java leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_huawei.html"><strong aria-hidden="true">18.6.</strong> huawei test</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_utils.html"><strong aria-hidden="true">18.7.</strong> rust common functions</a></li><li class="chapter-item "><a href="../../posts/leetcode/olympiad_training.html"><strong aria-hidden="true">18.8.</strong> Computer olympiad training</a></li></ol></li><li class="chapter-item "><a href="../../posts/ctf/CTF.html"><strong aria-hidden="true">19.</strong> ctf</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ctf/CTF_Note.html"><strong aria-hidden="true">19.1.</strong> CTF Note</a></li><li class="chapter-item "><a href="../../posts/ctf/0.1_Web.html"><strong aria-hidden="true">19.2.</strong> Web</a></li><li class="chapter-item "><a href="../../posts/ctf/4.1_Misc.html"><strong aria-hidden="true">19.3.</strong> Misc</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.4.</strong> PWN</a></li><li class="chapter-item "><a href="../../posts/ctf/3.1_Crypto.html"><strong aria-hidden="true">19.5.</strong> Crypto</a></li><li class="chapter-item "><a href="../../posts/ctf/3.4_RSA_note.html"><strong aria-hidden="true">19.6.</strong> Rsa attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.5_Base64.html"><strong aria-hidden="true">19.7.</strong> Base64</a></li><li class="chapter-item "><a href="../../posts/ctf/0.0_SQL Injection Cheatsheet.html"><strong aria-hidden="true">19.8.</strong> SQL Injection Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/1.1_SQL_injection.html"><strong aria-hidden="true">19.9.</strong> SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.2_SQL_injection_UNION_attacks.html"><strong aria-hidden="true">19.10.</strong> SQL Injection UNION attacks</a></li><li class="chapter-item "><a href="../../posts/ctf/1.3_Blind SQL injection.html"><strong aria-hidden="true">19.11.</strong> Blind SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.4_Code Injection.html"><strong aria-hidden="true">19.12.</strong> Code Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.5_SSRF.html"><strong aria-hidden="true">19.13.</strong> SSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.6_OS command injection.html"><strong aria-hidden="true">19.14.</strong> OS command injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.7_Local file inclusion.html"><strong aria-hidden="true">19.15.</strong> Local file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.8_Remote file inclusion.html"><strong aria-hidden="true">19.16.</strong> Remote file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.9_CSRFm.html"><strong aria-hidden="true">19.17.</strong> CSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.10_NoSQL injection.html"><strong aria-hidden="true">19.18.</strong> NoSQL injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.11_JSON injection.html"><strong aria-hidden="true">19.19.</strong> JSON injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.12_CTF_Web_SQL_Note.html"><strong aria-hidden="true">19.20.</strong> CTF Web SQL Note</a></li><li class="chapter-item "><a href="../../posts/ctf/2.1_XXE.html"><strong aria-hidden="true">19.21.</strong> XXE</a></li><li class="chapter-item "><a href="../../posts/ctf/2.2_XSS.html"><strong aria-hidden="true">19.22.</strong> XSS</a></li><li class="chapter-item "><a href="../../posts/ctf/2.3_Upload File.html"><strong aria-hidden="true">19.23.</strong> Upload File</a></li><li class="chapter-item "><a href="../../posts/ctf/2.4_serialize_unserialize.html"><strong aria-hidden="true">19.24.</strong> serialize unserialize</a></li><li class="chapter-item "><a href="../../posts/ctf/2.5_Race condition.html"><strong aria-hidden="true">19.25.</strong> Race condition</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.26.</strong> PWN_note</a></li><li class="chapter-item "><a href="../../posts/ctf/3.3_pwn HCTF2016 brop.html"><strong aria-hidden="true">19.27.</strong> pwn HCTF2016 brop</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_patch_defense_skill.html"><strong aria-hidden="true">19.28.</strong> PWN Patch defense skill</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_stack_overflow.html"><strong aria-hidden="true">19.29.</strong> PWN stack overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_heap_overflow.html"><strong aria-hidden="true">19.30.</strong> PWN heap overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_format_string_vulnerability.html"><strong aria-hidden="true">19.31.</strong> PWN Format String Vulnerability</a></li><li class="chapter-item "><a href="../../posts/ctf/kali_linux_tutorials.html"><strong aria-hidden="true">19.32.</strong> Kali linux tutorials</a></li><li class="chapter-item "><a href="../../posts/ctf/google_dorks_2023_lists.html"><strong aria-hidden="true">19.33.</strong> Google Dorks 2023 Lists</a></li><li class="chapter-item "><a href="../../posts/ctf/dvwa_writeup.html"><strong aria-hidden="true">19.34.</strong> DVWA WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/bwapp_writeup.html"><strong aria-hidden="true">19.35.</strong> bWAPP WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/sqlilabs_writeup.html"><strong aria-hidden="true">19.36.</strong> sqlilabs WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_train_at_hangzhou.html"><strong aria-hidden="true">19.37.</strong> ctf train at hangzhou</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_common_mindmap_list.html"><strong aria-hidden="true">19.38.</strong> ctf common mindmap list</a></li><li class="chapter-item "><a href="../../posts/ctf/error_based_sql_injection.html"><strong aria-hidden="true">19.39.</strong> Error Based SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/urlfinder_tutorial.html"><strong aria-hidden="true">19.40.</strong> URLFinder Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/observer_ward_tutorial.html"><strong aria-hidden="true">19.41.</strong> observer_ward Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/mysql_udf_.html"><strong aria-hidden="true">19.42.</strong> MySQL UDF 提权</a></li><li class="chapter-item "><a href="../../posts/ctf/nuclei__tutorial.html"><strong aria-hidden="true">19.43.</strong> Nuclei Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/2024_ctf_solution_thinking.html"><strong aria-hidden="true">19.44.</strong> 2024 ctf solution thinking</a></li><li class="chapter-item "><a href="../../posts/ctf/man_che_si_te_bian_ma.html"><strong aria-hidden="true">19.45.</strong> 曼彻斯特编码</a></li></ol></li></ol>
|
||
</div>
|
||
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
|
||
<div class="sidebar-resize-indicator"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Track and set sidebar scroll position -->
|
||
<script>
|
||
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
|
||
sidebarScrollbox.addEventListener('click', function(e) {
|
||
if (e.target.tagName === 'A') {
|
||
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
|
||
}
|
||
}, { passive: true });
|
||
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
|
||
sessionStorage.removeItem('sidebar-scroll');
|
||
if (sidebarScrollTop) {
|
||
// preserve sidebar scroll position when navigating via links within sidebar
|
||
sidebarScrollbox.scrollTop = sidebarScrollTop;
|
||
} else {
|
||
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
|
||
var activeSection = document.querySelector('#sidebar .active');
|
||
if (activeSection) {
|
||
activeSection.scrollIntoView({ block: 'center' });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<div id="page-wrapper" class="page-wrapper">
|
||
|
||
<div class="page">
|
||
<div id="menu-bar-hover-placeholder"></div>
|
||
<div id="menu-bar" class="menu-bar sticky">
|
||
<div class="left-buttons">
|
||
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||
<i class="fa fa-bars"></i>
|
||
</label>
|
||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||
<i class="fa fa-paint-brush"></i>
|
||
</button>
|
||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
||
</ul>
|
||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
||
<i class="fa fa-search"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<h1 class="menu-title">Andrew's Blog</h1>
|
||
|
||
<div class="right-buttons">
|
||
<a href="https://gitlink.org.cn/dnrops/dnrops.gitlink.net.git" title="Git repository" aria-label="Git repository">
|
||
<i id="git-repository-button" class="fa fa-github"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="search-wrapper" class="hidden">
|
||
<form id="searchbar-outer" class="searchbar-outer">
|
||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
||
</form>
|
||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
||
<div id="searchresults-header" class="searchresults-header"></div>
|
||
<ul id="searchresults">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||
<script>
|
||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||
});
|
||
</script>
|
||
|
||
<div id="content" class="content">
|
||
<main>
|
||
<h1 id="css-note"><a class="header" href="#css-note">CSS Note</a></h1>
|
||
<ul>
|
||
<li>CSS 的单位</li>
|
||
<li>字体属性</li>
|
||
<li>文本属性</li>
|
||
<li>定位属性：position、float、overflow 等</li>
|
||
</ul>
|
||
<h2 id="css-的单位"><a class="header" href="#css-的单位">CSS 的单位</a></h2>
|
||
<p>html 中的单位只有一种，那就是像素 px，所以单位是可以省略的，但是在 CSS 中不一样。
|
||
<font color="#0000FF">CSS 中的单位是必须要写的，因为它没有默认单位。</font></p>
|
||
<h3 id="绝对单位"><a class="header" href="#绝对单位">绝对单位</a></h3>
|
||
<p>1 <code>in</code>=2.54<code>cm</code>=25.4<code>mm</code>=72<code>pt</code>=6<code>pc</code>。
|
||
各种单位的含义：</p>
|
||
<ul>
|
||
<li><code>in</code>：英寸 Inches (1 英寸 = 2.54 厘米)</li>
|
||
<li><code>cm</code>：厘米 Centimeters</li>
|
||
<li><code>mm</code>：毫米 Millimeters</li>
|
||
<li><code>pt</code>：点 Points，或者叫英镑 (1 点 = 1/72 英寸)</li>
|
||
<li><code>pc</code>：皮卡 Picas (1 皮卡 = 12 点)</li>
|
||
</ul>
|
||
<h3 id="相对单位"><a class="header" href="#相对单位">相对单位</a></h3>
|
||
<p><code>px</code>：像素 <code>em</code>：印刷单位相当于 12 个点 <code>%</code>：百分比，相对周围的文字的大小
|
||
为什么说像素 px
|
||
是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。
|
||
百分比<code>%</code>这个相对单位要怎么用呢？这里也举个例子：
|
||
<img src="../../img_list/20151003css17.png" alt="" /></p>
|
||
<h2 id="font-字体属性"><a class="header" href="#font-字体属性">font 字体属性</a></h2>
|
||
<p>CSS 中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
|
||
这一段，我们先来讲一下字体属性。
|
||
css 样式中，常见的字体属性有以下几种：</p>
|
||
<pre><code class="language-css">p {
|
||
font-size: 50px; /*字体大小*/
|
||
line-height: 30px; /*行高*/
|
||
font-family: 幼圆, 黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
|
||
font-style: italic; /*italic表示斜体，normal表示不倾斜*/
|
||
font-weight: bold; /*粗体*/
|
||
font-variant: small-caps; /*小写变大写*/
|
||
}
|
||
</code></pre>
|
||
<h3 id="行高"><a class="header" href="#行高">行高</a></h3>
|
||
<p>CSS 中，所有的行，都有行高。盒子模型的 padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||
如下图所示：
|
||
<img src="../../img_list/20170808_2216.png" alt="" />
|
||
上图中，我们设置行高为 30px，30px * 5 = 150px，通过查看审查元素，这个 p 标签的高度果然为 150px。而且我们发现，我们并没有给这个
|
||
p 标签设置高度，显然是内容将其撑高的。
|
||
垂直方向来看，文字在自己的行里是居中的。比如，文字是 14px，行高是 24px，那么 padding 就是 5px：
|
||
<img src="../../img_list/20170808_2220.png" alt="" />
|
||
为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被 2 整除。</p>
|
||
<h3 id="如何让单行文本垂直居中"><a class="header" href="#如何让单行文本垂直居中">如何让单行文本垂直居中</a></h3>
|
||
<p>小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。
|
||
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的 padding。计算方式如下：
|
||
<img src="../../img_list/20170808_2240.png" alt="" /></p>
|
||
<h3 id="vertical-align-middle-属性"><a class="header" href="#vertical-align-middle-属性"><code>vertical-align: middle;</code> 属性</a></h3>
|
||
<p><code>vertical-align</code>属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
|
||
代码举例：</p>
|
||
<pre><code class="language-css">vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
|
||
</code></pre>
|
||
<p>关于这一点，连 MDN 上都没我讲得详细。MDN 上的原话是 “vertical-align
|
||
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。” MDN
|
||
上的这种描述是不完整的，漏掉了行内块元素（inline-block）。</p>
|
||
<h3 id="字号行高字体三大属性"><a class="header" href="#字号行高字体三大属性">字号、行高、字体三大属性</a></h3>
|
||
<p>（1）字号：</p>
|
||
<pre><code>font-size:14px;
|
||
</code></pre>
|
||
<p>（2）行高：</p>
|
||
<pre><code>line-height:24px;
|
||
</code></pre>
|
||
<p>（3）字体：（font-family 就是“字体”，family 是“家庭”的意思）</p>
|
||
<pre><code>font-family:"宋体";
|
||
</code></pre>
|
||
<p>是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
|
||
格式：</p>
|
||
<pre><code>font: 加粗 字号/行高/ 字体
|
||
</code></pre>
|
||
<p>举例：</p>
|
||
<pre><code>font: 400 14px/24px "宋体";
|
||
</code></pre>
|
||
<p>PS：400 是 nomal，700 是 bold。
|
||
上面这几个属性可以连写，但是有一个要求，font 属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。
|
||
2、字体属性的说明：
|
||
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：</p>
|
||
<pre><code>font-family: "华文彩云";
|
||
</code></pre>
|
||
<p>上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
|
||
页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。
|
||
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）</p>
|
||
<pre><code>font-family: "微软雅黑","宋体";
|
||
</code></pre>
|
||
<p>上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
|
||
（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：</p>
|
||
<pre><code>font-family: "Times New Roman","微软雅黑","宋体";
|
||
</code></pre>
|
||
<p>上方代码的意思是，英文会采用 Times New Roman 字体，而中文会采用微软雅黑字体（因为美国人设计的 Times New Roman
|
||
字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于<code>smyhvae哈哈哈</code>这段文字，<code>smyhvae</code>会采用 Times New Roman
|
||
字体，而<code>哈哈哈</code>会采用微软雅黑字体。
|
||
可是，如果我们把中文字体写在前面：(错误写法)</p>
|
||
<pre><code>font-family: "微软雅黑","Times New Roman","宋体";
|
||
</code></pre>
|
||
<p>上方代码会导致，中文和英文都会采用微软雅黑字体。
|
||
（4）所有的中文字体，都有英语别名。
|
||
微软雅黑的英语别名：</p>
|
||
<pre><code>font-family: "Microsoft YaHei";
|
||
</code></pre>
|
||
<p>宋体的英语别名：</p>
|
||
<pre><code>font-family: "SimSun";
|
||
</code></pre>
|
||
<p>于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：</p>
|
||
<pre><code>font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
|
||
</code></pre>
|
||
<p>（5）行高可以用百分比，表示字号的百分之多少。
|
||
一般来说，百分比都是大于 100%的，因为行高一定要大于字号。
|
||
比如说， <code>font:12px/200% “宋体”</code>等价于<code>font:12px/24px “宋体”</code>。<code>200%</code>可以理解成 word 里面的 2 倍行高。
|
||
反过来， <code>font:16px/48px “宋体”;</code>等价于<code>font:16px/300% “宋体”</code>。</p>
|
||
<h3 id="字体加粗属性"><a class="header" href="#字体加粗属性">字体加粗属性</a></h3>
|
||
<pre><code class="language-css">.div {
|
||
font-weight: normal; /*正常*/
|
||
font-weight: bold; /*加粗*/
|
||
font-weight: 100;
|
||
font-weight: 200;
|
||
font-weight: 900;
|
||
}
|
||
</code></pre>
|
||
<p>在设置字体是否加粗时，属性值既可以填写<code>normal</code>、<code>bold</code>这样的加粗字体，也可以直接填写 100 至 900 这样的数字。<code>normal</code>的值相当于
|
||
400，<code>bold</code>的值相当于 700。</p>
|
||
<h2 id="文本属性"><a class="header" href="#文本属性">文本属性</a></h2>
|
||
<p>CSS 样式中，常见的文本属性有以下几种：</p>
|
||
<ul>
|
||
<li><code>letter-spacing: 0.5cm ;</code> 单个字母之间的间距</li>
|
||
<li><code>word-spacing: 1cm;</code> 单词之间的间距</li>
|
||
<li><code>text-decoration: none;</code> 字体修饰：none 去掉下划线、underline 下划线、line-through
|
||
中划线、overline 上划线</li>
|
||
<li><code>text-transform: lowercase;</code> 单词字体大小写。uppercase 大写、lowercase 小写</li>
|
||
<li><code>color:red;</code> 字体颜色</li>
|
||
<li><code>text-align: center;</code>
|
||
在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">在当前容器的中间</font>）、justify</li>
|
||
<li><code>text-transform: lowercase;</code>
|
||
单词的字体大小写。属性值可以是：<code>uppercase</code>（单词大写）、<code>lowercase</code>（单词小写）、<code>capitalize</code>（每个单词的首字母大写）
|
||
这里来一张表格的图片吧，一览无遗：
|
||
<img src="../../img_list/20151003css18.png" alt="" /></li>
|
||
</ul>
|
||
<h2 id="列表属性"><a class="header" href="#列表属性">列表属性</a></h2>
|
||
<pre><code class="language-css">ul li {
|
||
list-style-image: url(images/2.gif); /*列表项前设置为图片*/
|
||
margin-left: 80px; /*公有属性*/
|
||
}
|
||
</code></pre>
|
||
<p>另外还有一个简写属性叫做<code>list-style</code>，它的作用是：将上面的多个属性写在一个声明中。
|
||
我们来看一下<code>list-style-image</code>属性的效果：
|
||
<img src="../../img_list/20151003css23.png" alt="" />
|
||
给列表前面的图片加个边距吧，不然显示不完整：
|
||
<img src="../../img_list/20151003css24_2.png" alt="" />
|
||
这里来一张表格的图片吧，一览无遗：
|
||
<img src="../../img_list/20151003css26.png" alt="" /></p>
|
||
<h2 id="overflow-属性超出范围的内容要怎么处理"><a class="header" href="#overflow-属性超出范围的内容要怎么处理">overflow 属性：超出范围的内容要怎么处理</a></h2>
|
||
<p><code>overflow</code>属性的属性值可以是：</p>
|
||
<ul>
|
||
<li><code>visible</code>：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。</li>
|
||
<li><code>hidden</code>：不显示超过对象尺寸的内容。</li>
|
||
<li><code>auto</code>：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。</li>
|
||
<li><code>scroll</code>：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 <code>auto</code> 属性相同。
|
||
针对上面的不同的属性值，我们来看一下效果： 举例：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="Generator" content="EditPlus®" />
|
||
<meta name="Author" content="" />
|
||
<meta name="Keywords" content="" />
|
||
<meta name="Description" content="" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
div {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: #00cc66;
|
||
margin-right: 100px;
|
||
float: left;
|
||
}
|
||
#div1 {
|
||
overflow: auto; /*超出的部分让浏览器自行解决*/
|
||
}
|
||
#div2 {
|
||
overflow: visible; /*超出的部分会显示出来*/
|
||
}
|
||
#div3 {
|
||
overflow: hidden; /*超出的部分将剪切掉*/
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="div1">
|
||
其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
|
||
隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
|
||
</div>
|
||
<div id="div2">
|
||
其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
|
||
隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
|
||
</div>
|
||
<div id="div3">
|
||
其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观
|
||
隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css31.png" alt="" /></p>
|
||
<h2 id="鼠标的属性-cursor"><a class="header" href="#鼠标的属性-cursor">鼠标的属性 cursor</a></h2>
|
||
<p>鼠标的属性<code>cursor</code>有以下几个属性值：</p>
|
||
<ul>
|
||
<li><code>auto</code>：默认值。浏览器根据当前情况自动确定鼠标光标类型。</li>
|
||
<li><code>pointer</code>：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。</li>
|
||
<li><code>hand</code>：和<code>pointer</code>的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：</li>
|
||
</ul>
|
||
<pre><code class="language-html">p:hover{ cursor: pointer; }
|
||
</code></pre>
|
||
<p>另外还有以下的属性：（不用记，需要的时候查一下就行了）</p>
|
||
<ul>
|
||
<li>all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。</li>
|
||
<li>col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。</li>
|
||
<li>crosshair : 简单的十字线光标。</li>
|
||
<li>default : 客户端平台的默认光标。通常是一个箭头。</li>
|
||
<li>hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。</li>
|
||
<li>move : 十字箭头光标。用于标示对象可被移动。</li>
|
||
<li>help : 带有问号标记的箭头。用于标示有帮助信息存在。</li>
|
||
<li>no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。</li>
|
||
<li>not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。</li>
|
||
<li>progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。</li>
|
||
<li>row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。</li>
|
||
<li>text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。</li>
|
||
<li>vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转 90 度的形状。</li>
|
||
<li>wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。</li>
|
||
<li>*-resize : 用于标示对象可被改变尺寸方向的箭头光标。</li>
|
||
<li>w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize</li>
|
||
<li>url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。</li>
|
||
</ul>
|
||
<h2 id="滤镜"><a class="header" href="#滤镜">滤镜</a></h2>
|
||
<p>这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：</p>
|
||
<pre><code class="language-html"><img src="3.jpg" style="filter:gray()" />
|
||
</code></pre>
|
||
<p>举例代码：</p>
|
||
<pre><code class="language-html"><body>
|
||
<table>
|
||
<tr>
|
||
<td>原始图片</td>
|
||
<td>图片加入黑白效果</td>
|
||
</tr>
|
||
<tr>
|
||
<td><img src="3.jpg" /></td>
|
||
<td><img src="3.jpg" style="filter:gray()" /></td>
|
||
/*滤镜：设置图片为灰白效果*/
|
||
</tr>
|
||
</table>
|
||
</body>
|
||
</code></pre>
|
||
<p>效果如下：（IE 有效果，google 浏览器无效果）
|
||
<img src="../../img_list/20151003css36.png" alt="" />
|
||
延伸： 滤镜本身是平面设计中的知识。如果你懂一点 PS 的话···打开 PS 看看吧：
|
||
<img src="../../img_list/20151003css38.png" alt="" />
|
||
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···</p>
|
||
<h2 id="导航栏的制作本段内容请忽略"><a class="header" href="#导航栏的制作本段内容请忽略">导航栏的制作（本段内容请忽略）</a></h2>
|
||
<p>现在，我们利用 float 浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||
<img src="../../img_list/20151003css34.png" alt="" />
|
||
代码：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="Generator" content="EditPlus®" />
|
||
<meta name="Author" content="" />
|
||
<meta name="Keywords" content="" />
|
||
<meta name="Description" content="" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
ul {
|
||
list-style: none; /*去掉列表前面的圆点*/
|
||
width: 420px;
|
||
height: 60px;
|
||
background-color: black; /*设置整个导航栏的背景为灰色*/
|
||
}
|
||
li {
|
||
float: left; /*平铺*/
|
||
margin-right: 30px;
|
||
margin-top: 16px;
|
||
}
|
||
a {
|
||
text-decoration: none; /*去掉超链的下划线*/
|
||
font-size: 20px;
|
||
color: #bbbbbb; /*设置超链的字体为黑色*/
|
||
font-family: 微软雅黑;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<ul>
|
||
<li><a href="">博客园</a></li>
|
||
<li><a href="">新随笔</a></li>
|
||
<li><a href="">联系</a></li>
|
||
<li><a href="">订阅</a></li>
|
||
<li><a href="">管理</a></li>
|
||
</ul>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>实现效果如下：
|
||
<img src="../../img_list/20151003css35.png" alt="" />
|
||
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。</p>
|
||
<blockquote>
|
||
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8277895.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
|
||
GitHub 上关注我，一起入门和进阶前端。
|
||
以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="background-的常见背景属性"><a class="header" href="#background-的常见背景属性">background 的常见背景属性</a></h2>
|
||
<p>css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）</p>
|
||
<ul>
|
||
<li><code>background-color:#ff99ff;</code> 设置元素的背景颜色。</li>
|
||
<li><code>background-image:url(images/2.gif);</code> 将图像设置为背景。</li>
|
||
<li><code>background-repeat: no-repeat;</code> 设置背景图片是否重复及如何重复，默认平铺满。（重要）</li>
|
||
<li><code>no-repeat</code>不要平铺；</li>
|
||
<li><code>repeat-x</code>横向平铺；</li>
|
||
<li><code>repeat-y</code>纵向平铺。</li>
|
||
<li><code>background-position:center top;</code> 设置背景图片在当前容器中的位置。</li>
|
||
<li><code>background-attachment:scroll;</code> 设置背景图片是否跟着滚动条一起移动。 属性值可以是：<code>scroll</code>（与 fixed
|
||
属性相反，默认属性）、<code>fixed</code>（背景就会被固定住，不会被滚动条滚走）。</li>
|
||
<li>另外还有一个综合属性叫做<code>background</code>，它的作用是：将上面的多个属性写在一个声明中。
|
||
CSS3 中，新增了一些 background 属性：</li>
|
||
<li>background-origin</li>
|
||
<li>background-clip 背景裁切</li>
|
||
<li>background-size 调整尺寸</li>
|
||
<li>多重背景
|
||
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。</li>
|
||
</ul>
|
||
<h2 id="background-color背景颜色的表示方法"><a class="header" href="#background-color背景颜色的表示方法">background-color：背景颜色的表示方法</a></h2>
|
||
<p>css2.1 中，颜色的表示方法有三种：单词、rgb 表示法、十六进制表示法。
|
||
比如红色可以有下面的三种表示方法：</p>
|
||
<pre><code class="language-css">background-color: red;
|
||
background-color: rgb(255, 0, 0);
|
||
background-color: #ff0000;
|
||
</code></pre>
|
||
<p>CSS3 中，有一种新的表示颜色的方式：RGBA 或者 HSLA。
|
||
RGBA、HSLA 可应用于所有使用颜色的地方。
|
||
下面分别介绍。</p>
|
||
<h3 id="用英语单词表示"><a class="header" href="#用英语单词表示">用英语单词表示</a></h3>
|
||
<p>能够用英语单词来表述的颜色，都是简单颜色，比如 red、green、blue、orange、gray 等。代码举例：</p>
|
||
<pre><code class="language-css">background-color: red;
|
||
</code></pre>
|
||
<h3 id="rgb-表示法"><a class="header" href="#rgb-表示法">RGB 表示法</a></h3>
|
||
<p>RGB 表示三原色“红”red、“绿”green、“蓝”blue。
|
||
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b 的值，每个值的取值范围 0~255，一共 256 个值。
|
||
比如红色：</p>
|
||
<pre><code class="language-css">background-color: rgb(255, 0, 0);
|
||
</code></pre>
|
||
<p>黑色：</p>
|
||
<pre><code class="language-css">background-color: rgb(0, 0, 0);
|
||
</code></pre>
|
||
<p>颜色可以叠加，比如黄色就是红色和绿色的叠加：</p>
|
||
<pre><code class="language-css">background-color: rgb(255, 255, 0);
|
||
</code></pre>
|
||
<h3 id="rgba-表示法"><a class="header" href="#rgba-表示法">RGBA 表示法</a></h3>
|
||
<pre><code class="language-javascript">background-color: rgba(0, 0, 255, 0.3);
|
||
border: 30px solid rgba(0, 255, 0, 0.3);
|
||
</code></pre>
|
||
<p>代码解释：</p>
|
||
<ul>
|
||
<li>RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。</li>
|
||
<li>R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
|
||
RGB 色彩模式：</li>
|
||
<li>自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。</li>
|
||
<li>RGB 三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青。</li>
|
||
<li>在数字视频中，对 RGB 三基色各进行 8 位编码就构成了大约 1678 万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是 RGB 色彩模式。</li>
|
||
<li>RGB 各有 256 级(0-255)亮度，256 级的 RGB 色彩总共能组合出约 1678 万种色彩，即 256×256×256=16777216。</li>
|
||
</ul>
|
||
<h3 id="十六进制表示法"><a class="header" href="#十六进制表示法">十六进制表示法</a></h3>
|
||
<p>比如红色：</p>
|
||
<pre><code>background-color: #ff0000;
|
||
</code></pre>
|
||
<p>PS:所有用<code>#</code>开头的值，都是 16 进制的。
|
||
这里，我们就要学会 16 进制与 10 进制之间的转换。下面举几个例子。
|
||
问：16 进制中 28 等于 10 进制多少？ 答：2*16+8 = 40。
|
||
16 进制中的 af 等于 10 进制多少？ 答：10 * 16 + 15 = 175
|
||
所以，#ff0000 就等于 rgb(255,0,0)。
|
||
<code>background-color: #123456;</code>等价于<code>background-color: rgb(18,52,86);</code>
|
||
十六进制可以简化为 3 位，所有#aabbcc 的形式，能够简化为#abc。举例如下：
|
||
比如：</p>
|
||
<pre><code>background-color:#ff0000;
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code>background-color:#f00;
|
||
</code></pre>
|
||
<p>比如：</p>
|
||
<pre><code>background-color:#112233;
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code>background-color:#123;
|
||
</code></pre>
|
||
<p>但是，比如下面这个是无法简化的：</p>
|
||
<pre><code>background-color:#222333;
|
||
</code></pre>
|
||
<p>再比如，下面这个也是无法简化的：</p>
|
||
<pre><code>background-color:#123123;
|
||
</code></pre>
|
||
<p>几种常见的颜色简写可以记住。如下：</p>
|
||
<pre><code>#000 黑
|
||
#fff 白
|
||
#f00 红
|
||
#222 深灰
|
||
#333 灰
|
||
#ccc 浅灰
|
||
</code></pre>
|
||
<h3 id="hsla-表示法"><a class="header" href="#hsla-表示法">HSLA 表示法</a></h3>
|
||
<p>举例：</p>
|
||
<pre><code class="language-javascript">background-color: hsla(240,50%,50%,0.4);
|
||
</code></pre>
|
||
<p>解释：</p>
|
||
<ul>
|
||
<li><code>H</code> 色调，取值范围 0~360。0 或 360 表示红色、120 表示绿色、240 表示蓝色。</li>
|
||
<li><code>S</code> 饱和度，取值范围 0%~100%。值越大，越鲜艳。</li>
|
||
<li><code>L</code> 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。</li>
|
||
<li><code>A</code> 透明度，取值范围 0~1。
|
||
如果不知道 H 的值该设置多少，我们不妨来看一下色盘：
|
||
<img src="../../img_list/20180207_1545.png" alt="" />
|
||
推荐链接：<a href="http://www.uisdc.com/how-to-create-color-palettes">配色宝典</a>
|
||
关于设置透明度的其他方式：
|
||
（1）<code>opacity: 0.3;</code> 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
|
||
（2）<code>background: transparent;</code> 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。</li>
|
||
</ul>
|
||
<h2 id="background-repeat属性"><a class="header" href="#background-repeat属性"><code>background-repeat</code>属性</a></h2>
|
||
<p><code>background-repeat:no-repeat;</code>设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：</p>
|
||
<ul>
|
||
<li><code>no-repeat</code>（不要平铺）</li>
|
||
<li><code>repeat-x</code>（横向平铺）</li>
|
||
<li><code>repeat-y</code>（纵向平铺）
|
||
这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
|
||
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||
<img src="../../img_list/20151003css19.png" alt="" />
|
||
PS：padding 的区域也是有背景图的。
|
||
（2）属性值为<code>no-repeat</code>（不要平铺）时：
|
||
<img src="../../img_list/20151003css20.png" alt="" />
|
||
（3）属性值为<code>repeat-x</code>（横向平铺）时：
|
||
<img src="../../img_list/20151003css21.png" alt="" />
|
||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有
|
||
1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||
在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。
|
||
（4）属性值为<code>repeat-y</code>（纵向平铺）时：
|
||
<img src="../../img_list/20151003css22.png" alt="" /></li>
|
||
</ul>
|
||
<h2 id="background-position属性"><a class="header" href="#background-position属性"><code>background-position</code>属性</a></h2>
|
||
<p><code>background-position</code>属性指的是背景定位属性。公式如下：
|
||
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
|
||
1、用像素值描述属性值：
|
||
格式如下：</p>
|
||
<pre><code>background-position:向右偏移量 向下偏移量;
|
||
</code></pre>
|
||
<p>属性值可以是正数，也可以是负数。比如：<code>100px 200px</code>、<code>-50px -120px</code>。
|
||
举例如下：
|
||
<img src="../../img_list/20170812_1643.png" alt="" />
|
||
<img src="../../img_list/20170812_1645.png" alt="" />
|
||
2、用单词描述属性值：
|
||
格式如下：</p>
|
||
<pre><code>background-position: 描述左右的词 描述上下的词;
|
||
</code></pre>
|
||
<ul>
|
||
<li>描述左右的词：left、center、right</li>
|
||
<li>描述上下的词：top 、center、bottom
|
||
比如说，<code>right center</code>表示将图片放到右边的中间；<code>center center</code>表示将图片放到正中间。
|
||
比如说，<code>bottom</code>表示图片的底边和父亲底边贴齐（好好理解）。
|
||
位置属性有很多使用场景的。我们来举两个例子。
|
||
场景 1：（大背景图）
|
||
打开“暗黑 3 台湾”的官网<a href="https://tw.battle.net/d3/zh/">https://tw.battle.net/d3/zh/</a>，可以看到官网的效果是比较炫的：
|
||
<img src="../../img_list/20170812_1945.jpg" alt="" />
|
||
检查网页后，找到网站背景图片的
|
||
url：<a href="https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg">https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg</a>。背景图如下：
|
||
<img src="../../img_list/20170812_1950.jpg" alt="" />
|
||
实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给 body 标签加如下属性即可：</li>
|
||
</ul>
|
||
<pre><code>body{
|
||
background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
|
||
background-repeat: no-repeat;
|
||
background-position: center top;
|
||
}
|
||
</code></pre>
|
||
<p>上方代码中，如果没加<code>background-position</code>这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
|
||
场景 2：（通栏 banner）
|
||
很多网站的首页都会有 banner 图（网站最上方的全屏大图叫做「通栏 banner」），这种图要求横向的宽度特别大。比如说，设计师给你一张 1920*465
|
||
的超大 banner 图，如果我们把这个 banner 图作为 img
|
||
标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
|
||
<img src="../../img_list/20170813_1102.gif" alt="" />
|
||
正确的做法是，将 banner 图作为 div 的背景图，这样的话，背景图超出 div 的部分，会自动移溢出。需要给 div 设置的属性如下：</p>
|
||
<pre><code class="language-css">div {
|
||
height: 465px;
|
||
background-image: url(../../img_list/20170813_1053.jpg);
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
}
|
||
</code></pre>
|
||
<p>上方代码中，我们给 div 设置 height（高度为 banner 图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：
|
||
<img src="../../img_list/20170813_1119.gif" alt="" />
|
||
上图可以看出，将 banner 图作为 div 的背景后，banner 图会永远处于网页的正中间（水平方向来看）。</p>
|
||
<h2 id="background-attachment-属性"><a class="header" href="#background-attachment-属性">background-attachment 属性</a></h2>
|
||
<ul>
|
||
<li><code>background-attachment:scroll;</code> 设置背景图片是否固定。属性值可以是：</li>
|
||
<li><code>fixed</code>（背景就会被固定住，不会被滚动条滚走）。</li>
|
||
<li><code>scroll</code>（与 fixed 属性相反，默认属性）
|
||
<code>background-attachment:fixed;</code>的效果如下：
|
||
<img src="../../img_list/20170813_1158.gif" alt="" /></li>
|
||
</ul>
|
||
<h3 id="background-综合属性"><a class="header" href="#background-综合属性">background 综合属性</a></h3>
|
||
<p>background 属性和 border
|
||
一样，是一个综合属性，可以将多个属性写在一起。(在<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">盒子模型</a>这篇文章中专门讲到
|
||
border)
|
||
举例 1:</p>
|
||
<pre><code class="language-css">background: red url(1.jpg) no-repeat 100px 100px fixed;
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code class="language-css">background-color: red;
|
||
background-image: url(1.jpg);
|
||
background-repeat: no-repeat;
|
||
background-position: 100px 100px;
|
||
background-attachment: fixed;
|
||
</code></pre>
|
||
<p>以后，我们可以用小属性层叠掉大属性。
|
||
上面的属性中，可以任意省略其中的一部分。
|
||
比如说，对于下面这样的属性：</p>
|
||
<pre><code class="language-css">background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20170813_1515.png" alt="" /></p>
|
||
<h2 id="background-size属性背景尺寸"><a class="header" href="#background-size属性背景尺寸"><code>background-size</code>属性：背景尺寸</a></h2>
|
||
<p><code>background-size</code>属性：设置背景图片的尺寸。
|
||
格式举例：</p>
|
||
<pre><code class="language-javascript">/* 宽、高的具体数值 */
|
||
background-size: 500px 500px;
|
||
/* 宽高的百分比（相对于容器的大小） */
|
||
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
|
||
background-size: 100% auto; //这个属性可以自己试验一下。
|
||
/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
|
||
background-size: cover;
|
||
/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
|
||
background-size: contain;
|
||
</code></pre>
|
||
<p>这里我们对属性值 <code>cover</code> 和 <code>contain</code> 进行再次强调：</p>
|
||
<ul>
|
||
<li><code>cover</code>：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。</li>
|
||
<li><code>contain</code>：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。
|
||
代码举例：（这张图片本身的尺寸是 1080 * 1350）</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Document</title>
|
||
<style>
|
||
.img_wrap {
|
||
display: flex;
|
||
}
|
||
.img {
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 1px solid red;
|
||
background: url(../../img_list/20191006_1330.jpg) no-repeat;
|
||
margin-right: 20px;
|
||
}
|
||
.div1 {
|
||
background-size: cover;
|
||
}
|
||
.div2 {
|
||
background-size: contain;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="img_wrap">
|
||
<div class="img div1"></div>
|
||
<div class="img div2"></div>
|
||
</section>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20191006_1350.png" alt="" />
|
||
在上方代码的基础之上，再加一个 <code>background-position: center</code>属性之后，图片就会在容器里居中显示：
|
||
<img src="../../img_list/20191006_1520.png" alt="" /></p>
|
||
<h2 id="背景原点background-origin-属性"><a class="header" href="#背景原点background-origin-属性">背景原点：<code>background-origin</code> 属性</a></h2>
|
||
<p><code>background-origin</code> 属性：控制背景从什么地方开始显示。
|
||
格式举例：</p>
|
||
<pre><code class="language-javascript">/* 从 padding-box 内边距开始显示背景图 */
|
||
background-origin: padding-box; //默认值
|
||
/* 从 border-box 边框开始显示背景图 */
|
||
background-origin: border-box;
|
||
/* 从 content-box 内容区域开始显示背景图 */
|
||
background-origin: content-box;
|
||
</code></pre>
|
||
<p>如果属性值设置成了<code>border-box</code>，那边框部分也会显示图片哦。
|
||
如下图所示：
|
||
<img src="../../img_list/20180207_2115.png" alt="" /></p>
|
||
<h2 id="background-clip属性设置元素的背景背景图片或颜色是否延伸到边框下面"><a class="header" href="#background-clip属性设置元素的背景背景图片或颜色是否延伸到边框下面"><code>background-clip</code>属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面</a></h2>
|
||
<p>格式举例：
|
||
<code>background-clip: content-box;</code> 超出的部分，将裁剪掉。属性值可以是：</p>
|
||
<ul>
|
||
<li><code>border-box</code> 超出 border-box 的部分，将裁剪掉</li>
|
||
<li><code>padding-box</code> 超出 padding-box 的部分，将裁剪掉</li>
|
||
<li><code>content-box</code> 超出 content-box 的部分，将裁剪掉
|
||
假设现在有这样的属性设置：</li>
|
||
</ul>
|
||
<pre><code class="language-javascript">background-origin: border-box;
|
||
background-clip: content-box;
|
||
</code></pre>
|
||
<p>上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。</p>
|
||
<h2 id="同时设置多个背景"><a class="header" href="#同时设置多个背景">同时设置多个背景</a></h2>
|
||
<p>我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
|
||
代码举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
.box {
|
||
height: 416px;
|
||
border: 1px solid #000;
|
||
margin: 100px auto;
|
||
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
|
||
background: url(images/bg1.png) no-repeat left top, url(images/bg2.png)
|
||
no-repeat right top, url(images/bg3.png) no-repeat right bottom, url(images/bg4.png)
|
||
no-repeat left bottom, url(images/bg5.png) no-repeat center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="box"></div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>实现效果如下：
|
||
<img src="../../img_list/20180207_2140.gif" alt="" />
|
||
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。</p>
|
||
<h2 id="渐变background-image"><a class="header" href="#渐变background-image">渐变：background-image</a></h2>
|
||
<p>渐变是 CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
|
||
渐变分为：</p>
|
||
<ul>
|
||
<li>线性渐变：沿着某条直线朝一个方向产生渐变效果。</li>
|
||
<li>径向渐变：从一个中心点开始沿着四周产生渐变效果。</li>
|
||
<li>重复渐变。
|
||
见下图：
|
||
<img src="../../img_list/20180208_1140.png" alt="" /></li>
|
||
</ul>
|
||
<h3 id="线性渐变"><a class="header" href="#线性渐变">线性渐变</a></h3>
|
||
<p>格式：</p>
|
||
<pre><code class="language-javascript">background-image: linear-gradient(方向, 起始颜色, 终止颜色);
|
||
background-image: linear-gradient(to right, yellow, green);
|
||
</code></pre>
|
||
<p>参数解释：</p>
|
||
<ul>
|
||
<li>方向可以是：<code>to left</code>、<code>to right</code>、<code>to top</code>、<code>to bottom</code>、角度<code>30deg</code>（指的是顺时针方向 30°）。
|
||
格式举例：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
div {
|
||
width: 500px;
|
||
height: 100px;
|
||
margin: 10px auto;
|
||
border: 1px solid #000;
|
||
}
|
||
/* 语法：
|
||
linear-gradient(方向，起始颜色，终止颜色);
|
||
方向：to left to right to top to bottom 角度 30deg
|
||
起始颜色
|
||
终止颜色
|
||
*/
|
||
div:nth-child(1) {
|
||
background-image: linear-gradient(to right, yellow, green);
|
||
}
|
||
/* 不写方向，表示默认的方向是：从上往下 */
|
||
div:nth-child(2) {
|
||
background-image: linear-gradient(yellow, green);
|
||
}
|
||
/* 方向可以指定角度 */
|
||
div:nth-child(3) {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-image: linear-gradient(135deg, yellow, green);
|
||
}
|
||
/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
|
||
div:nth-child(4) {
|
||
background-image: linear-gradient(
|
||
to right,
|
||
yellow 0%,
|
||
red 40%,
|
||
green 70%,
|
||
blue 100%
|
||
);
|
||
}
|
||
/* 颜色之间，出现突变 */
|
||
div:nth-child(5) {
|
||
background-image: linear-gradient(
|
||
45deg,
|
||
yellow 0%,
|
||
yellow 25%,
|
||
blue 25%,
|
||
blue 50%,
|
||
red 50%,
|
||
red 75%,
|
||
green 75%,
|
||
green 100%
|
||
);
|
||
}
|
||
div:nth-child(6) {
|
||
background-image: linear-gradient(
|
||
to right,
|
||
#000 0%,
|
||
#000 25%,
|
||
#fff 25%,
|
||
#fff 50%,
|
||
#000 50%,
|
||
#000 75%,
|
||
#fff 75%,
|
||
#fff 100%
|
||
);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_2222.png" alt="" />
|
||
举例：按钮</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>CSS3 渐变</title>
|
||
<style>
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f8fcd4;
|
||
}
|
||
.nav {
|
||
width: 800px;
|
||
text-align: center;
|
||
padding-top: 50px;
|
||
margin: 0 auto;
|
||
}
|
||
/*设置按钮基本样式*/
|
||
.nav a {
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border: 1px solid #e59500;
|
||
background-color: #ffb700;
|
||
background-image: linear-gradient(to bottom, #ffb700 0%, #ff8c00 100%);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="nav">
|
||
<a href="javascript:;">导航1</a>
|
||
<a href="javascript:;">导航2</a>
|
||
<a href="javascript:;">导航3</a>
|
||
<a href="javascript:;">导航4</a>
|
||
<a href="javascript:;">导航5</a>
|
||
<a href="javascript:;">导航6</a>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20180207_2301.png" alt="" /></p>
|
||
<h3 id="径向渐变"><a class="header" href="#径向渐变">径向渐变</a></h3>
|
||
<p>格式：</p>
|
||
<pre><code>background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
|
||
background-image: radial-gradient(100px at center,yellow ,green);
|
||
</code></pre>
|
||
<p>解释：围绕中心点做渐变，半径是 150px，从黄色到绿色做渐变。
|
||
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
|
||
当然，还有其他的各种参数。格式举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
div {
|
||
width: 250px;
|
||
height: 250px;
|
||
border: 1px solid #000;
|
||
margin: 20px;
|
||
float: left;
|
||
}
|
||
/*
|
||
径向渐变：
|
||
radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
|
||
中心点位置：at left right center bottom top
|
||
*/
|
||
/*辐射半径为100px，中心点在中间*/
|
||
div:nth-child(1) {
|
||
background-image: radial-gradient(100px at center, yellow, green);
|
||
}
|
||
/*中心点在左上角*/
|
||
div:nth-child(3) {
|
||
background-image: radial-gradient(at left top, yellow, green);
|
||
}
|
||
div:nth-child(2) {
|
||
background-image: radial-gradient(at 50px 50px, yellow, green);
|
||
}
|
||
/*设置不同的颜色渐变*/
|
||
div:nth-child(4) {
|
||
background-image: radial-gradient(
|
||
100px at center,
|
||
yellow 0%,
|
||
green 30%,
|
||
blue 60%,
|
||
red 100%
|
||
);
|
||
}
|
||
/*如果辐射半径的宽高不同，那就是椭圆*/
|
||
div:nth-child(5) {
|
||
background-image: radial-gradient(100px 50px at center, yellow, green);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="box"></div>
|
||
<div class="box"></div>
|
||
<div class="box"></div>
|
||
<div class="box"></div>
|
||
<div class="box"></div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_2256.png" alt="" />
|
||
举例：利用径向渐变和边框圆角的属性，生成按钮。代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>CSS3 渐变</title>
|
||
<style>
|
||
div:nth-child(1) {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 40px auto;
|
||
border-radius: 100px;
|
||
background-color: yellowgreen;
|
||
}
|
||
div:nth-child(2) {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 40px auto;
|
||
border-radius: 100px;
|
||
background-color: yellowgreen;
|
||
background-image: radial-gradient(
|
||
200px at 100px 100px,
|
||
rgba(0, 0, 0, 0),
|
||
rgba(0, 0, 0, 0.5)
|
||
);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div></div>
|
||
<div></div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180208_1133.png" alt="" />
|
||
上图中，给第二个 div 设置的透明度是从 0 到 0.5。如果设置的透明度是从 0 到 0，则样式无变化，和第一个 div 一样。如果设置的透明度是从 1 到
|
||
1，则盒子是全黑的。</p>
|
||
<h2 id="clip-path裁剪出元素的部分区域做展示"><a class="header" href="#clip-path裁剪出元素的部分区域做展示">clip-path：裁剪出元素的部分区域做展示</a></h2>
|
||
<p><code>clip-path</code>属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
|
||
虽然<code>clip-path</code>不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
|
||
举例：（鼠标悬停时，放大裁剪的区域）</p>
|
||
<pre><code class="language-css">.div1 {
|
||
width: 320px;
|
||
height: 320px;
|
||
border: 1px solid red;
|
||
background: url(../../img_list/20191006_1410.png) no-repeat;
|
||
background-size: cover;
|
||
/* 裁剪出圆形区域 */
|
||
clip-path: circle(50px at 100px 100px);
|
||
transition: clip-path 0.4s;
|
||
}
|
||
.div1:hover {
|
||
/* 鼠标悬停时，裁剪出更大的圆形 */
|
||
clip-path: circle(80px at 100px 100px);
|
||
}
|
||
</code></pre>
|
||
<p><code>clip-path</code>属性的好处是，即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px *
|
||
320px。这样的话，也方便我们做一些动画效果。
|
||
<code>clip-path: polygon()</code>举例：
|
||
<img src="../../img_list/20191006_1430.png" alt="" />
|
||
另外，通过 <code>clip-path: (svg)</code> 可以导入 svg 矢量图，实现 iOS 图标的圆角。这里就不详细展开了。</p>
|
||
<blockquote>
|
||
<p>本文最初于 2015-10-03
|
||
发表于<a href="http://www.cnblogs.com/smyhvae/p/4853995.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
|
||
GitHub 上关注我，一起入门和进阶前端。</p>
|
||
</blockquote>
|
||
<h2 id="本文主要内容"><a class="header" href="#本文主要内容">本文主要内容</a></h2>
|
||
<ul>
|
||
<li>CSS 概述</li>
|
||
<li>CSS 和 HTML 结合的三种方式：<code>行内样式表</code>、<code>内嵌样式表</code>、<code>外部样式表</code></li>
|
||
<li>CSS 四种基本选择器：<code>标签选择器</code>、<code>类选择器</code>、<code>ID选择器</code>、<code>通用选择器</code></li>
|
||
<li>CSS 几种扩展选择器：<code>后代选择器</code>、<code>交集选择器</code>、<code>并集选择器</code></li>
|
||
<li>CSS 样式优先级</li>
|
||
</ul>
|
||
<h2 id="前言"><a class="header" href="#前言">前言</a></h2>
|
||
<h2 id="css-概述"><a class="header" href="#css-概述">CSS 概述</a></h2>
|
||
<p>CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS
|
||
将网页内容和显示样式进行分离，提高了显示功能。
|
||
css 的最新版本是 css3，我们目前学习的是 css2.1。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。
|
||
接下来我们要讲一下为什么要使用 CSS。
|
||
HTML 的缺陷：</p>
|
||
<ol>
|
||
<li>不能够适应多种设备</li>
|
||
<li>要求浏览器必须智能化足够庞大</li>
|
||
<li>数据和显示没有分开</li>
|
||
<li>功能不够强大
|
||
CSS 优点：</li>
|
||
<li>使数据和显示分开</li>
|
||
<li>降低网络流量</li>
|
||
<li>使整个网站视觉效果一致</li>
|
||
<li>使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）
|
||
比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给
|
||
css 提供各种各样的样式。</li>
|
||
</ol>
|
||
<h3 id="css-的重点知识点"><a class="header" href="#css-的重点知识点">CSS 的重点知识点</a></h3>
|
||
<p>盒子模型、浮动、定位</p>
|
||
<h3 id="css-整体感知"><a class="header" href="#css-整体感知">CSS 整体感知</a></h3>
|
||
<p>我们先来看一段简单的 css 代码：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style>
|
||
p {
|
||
color: red;
|
||
font-size: 30px;
|
||
text-decoration: underline;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
font-style: italic;
|
||
}
|
||
h1 {
|
||
color: blue;
|
||
font-size: 50px;
|
||
font-weight: bold;
|
||
background-color: pink;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>我是大标题</h1>
|
||
<p>我是内容</p>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>解释如下：
|
||
<img src="../../img_list/20170710_1605.png" alt="" />
|
||
我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在
|
||
style 标签里面。
|
||
如果在 sublime 中输入<code><st</code>或者<code><style</code>然后按 tab 键，可以自动生成的格式如下：（建议）</p>
|
||
<pre><code class="language-html"><style type="text/css"></style>
|
||
</code></pre>
|
||
<p>type 表示“类型”，text 就是“纯文本”，css 也是纯文本。
|
||
但是，如果在 sublime 中输入<code>st</code>或者<code>style</code>然后按 tab 键，可以自动生成的格式如下：（不建议）</p>
|
||
<pre><code class="language-html"><style></style>
|
||
</code></pre>
|
||
<p>css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。</p>
|
||
<h2 id="css-语法"><a class="header" href="#css-语法">CSS 语法</a></h2>
|
||
<p>语法格式：（其实就是键值对）</p>
|
||
<pre><code class="language-html">选择器{ 属性名: 属性值; 属性名: 属性值; }
|
||
</code></pre>
|
||
<p>或者可以写成：</p>
|
||
<pre><code class="language-css">选择器 {
|
||
k: v;
|
||
k: v;
|
||
k: v;
|
||
k: v;
|
||
}
|
||
选择器 {
|
||
k: v;
|
||
k: v;
|
||
k: v;
|
||
k: v;
|
||
}
|
||
</code></pre>
|
||
<p>解释：</p>
|
||
<ul>
|
||
<li>选择器代表页面上的某类元素，选择器后一定是大括号。</li>
|
||
<li>属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。</li>
|
||
<li>冒号和属性值之间可以留一个空格（编程习惯的经验）。</li>
|
||
<li>如果一个属性有多个值的话，那么多个值用空格隔开。
|
||
举例：</li>
|
||
</ul>
|
||
<pre><code class="language-css">p {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>完整版代码举例：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
p {
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
color: red;
|
||
}
|
||
</style>
|
||
<body>
|
||
<p>洗白白</p>
|
||
<p>你懂得</p>
|
||
<p>我不会就这样轻易的狗带</p>
|
||
</body>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css01.png" alt="" /></p>
|
||
<h3 id="css-代码的注释"><a class="header" href="#css-代码的注释">css 代码的注释</a></h3>
|
||
<p>格式：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
/*
|
||
具体的注释
|
||
*/
|
||
p {
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>注意：CSS 只有<code>/* */</code>这种注释，没有<code>//</code>这种注释。而且注释要写在<code><style></code>标签里面才算生效哦。
|
||
接下来，我们要开始真正地讲 css 的知识咯。
|
||
css 怎么学？CSS 有两个知识部分： 1） 选择器，怎么选； 2） 属性，样式是什么</p>
|
||
<h2 id="css-的一些简单常见的属性"><a class="header" href="#css-的一些简单常见的属性">CSS 的一些简单常见的属性</a></h2>
|
||
<blockquote>
|
||
<p>我们先来接触 CSS 的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写 CSS 的属性。
|
||
以下属性值中，括号中的内容表示 sublime 中的快捷键。
|
||
字体颜色：（c）</p>
|
||
</blockquote>
|
||
<pre><code class="language-html">color:red;
|
||
</code></pre>
|
||
<p>color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。
|
||
字号大小：（fos）</p>
|
||
<pre><code class="language-html">font-size:40px;
|
||
</code></pre>
|
||
<p>font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。
|
||
背景颜色：（bgc）</p>
|
||
<pre><code class="language-html">background-color: blue;
|
||
</code></pre>
|
||
<p>background 就是“背景”。
|
||
加粗：（fwb）</p>
|
||
<pre><code class="language-html">font-weight: bold;
|
||
</code></pre>
|
||
<p>font 是“字体” weight 是“重量”的意思，bold 粗。
|
||
不加粗：（fwn）</p>
|
||
<pre><code class="language-html">font-weight: normal;
|
||
</code></pre>
|
||
<p>normal 就是正常的意思。
|
||
斜体：（fsi）</p>
|
||
<pre><code class="language-html">font-style: italic;
|
||
</code></pre>
|
||
<p>italic 就是“斜体”。
|
||
不斜体：（fsn）</p>
|
||
<pre><code class="language-html">font-style: normal;
|
||
</code></pre>
|
||
<p>下划线：（tdu）</p>
|
||
<pre><code class="language-html">text-decoration: underline;
|
||
</code></pre>
|
||
<p>decoration 就是“装饰”的意思。
|
||
没有下划线：（tdn）</p>
|
||
<pre><code class="language-html">text-decoration:none;
|
||
</code></pre>
|
||
<h2 id="css-和-html-结合的方式样式表"><a class="header" href="#css-和-html-结合的方式样式表">CSS 和 HTML 结合的方式（样式表）</a></h2>
|
||
<p>CSS 和 HTML 结合的方式，其实就是问你 css 的代码放在哪里比较合适。CSS
|
||
代码理论上的位置是任意的，但通常写在<code><style></code>标签里。只要是<code><style></code>标签里的代码，那就是 css 代码，浏览器就是这样来进行解析的。
|
||
CSS 和 HTML 的结合方式有 3 种：</p>
|
||
<ul>
|
||
<li>行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。</li>
|
||
<li>内嵌样式表：在页面的 head 里采用<code><style></code>标签。范围针对此页面。</li>
|
||
<li>引入外部样式表 css 文件的方式。这种引入方式又分为两种： -
|
||
1、采用<code><link></code>标签。例如：<code><link rel = "stylesheet" type = "text/css" href = "a.css"></link></code> -
|
||
2、采用 import，必须写在<code><style></code>标签中，并且必须是第一句。例如：<code>@import url(a.css) ;</code></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
|
||
下面来详细的讲一讲这三种方式。</p>
|
||
</blockquote>
|
||
<h3 id="1css-和-html-结合方式一行内样式"><a class="header" href="#1css-和-html-结合方式一行内样式">1、CSS 和 HTML 结合方式一：行内样式</a></h3>
|
||
<p>采用 style 属性。范围只针对此标签适用。
|
||
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
|
||
举例：</p>
|
||
<pre><code class="language-html"><p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
|
||
|
||
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css02.png" alt="" /></p>
|
||
<h3 id="2css-和-html-结合方式二内嵌样式表"><a class="header" href="#2css-和-html-结合方式二内嵌样式表">2、CSS 和 HTML 结合方式二：内嵌样式表</a></h3>
|
||
<p>在 head 标签中加入<code><style></code>标签，对多个标签进行统一修改，范围针对此页面。
|
||
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
|
||
举例：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
p {
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
color: red;
|
||
}
|
||
</style>
|
||
<body>
|
||
<p>洗白白</p>
|
||
<p style="color:blue">你懂得</p>
|
||
</body>
|
||
</code></pre>
|
||
<p><img src="../../img_list/20151003css03.png" alt="" /></p>
|
||
<h3 id="3css-和-html-结合方式三引入外部样式表-css-文件"><a class="header" href="#3css-和-html-结合方式三引入外部样式表-css-文件">3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件</a></h3>
|
||
<p>引入样式表文件的方式又分为两种：</p>
|
||
<ul>
|
||
<li>（1）采用<code><link></code>标签。例如：<code><link rel = "stylesheet" type = "text/css" href = "a.css"></link></code></li>
|
||
<li>（2）采用 import，必须写在<code><style></code>标签中，并且必须是第一句。例如：<code>@import url(a.css) ;</code></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
|
||
具体操作如下：
|
||
我们先在 html 页面的同级目录下新建一个<code>a.css</code>文件，那说明这里面的代码全是 css 代码，此时就没有必要再写<code><style></code>标签这几个字了。
|
||
<code>a.css</code>的代码如下：</p>
|
||
</blockquote>
|
||
<pre><code class="language-css">p {
|
||
border: 1px solid red;
|
||
font-size: 40px;
|
||
}
|
||
</code></pre>
|
||
<p>上方的 css 代码中，注意像素要带上 px 这个单位，不然不生效。 然后我们在 html 文件中通过<code><link></code>标签引入这个 css
|
||
文件就行了。效果如下：
|
||
<img src="../../img_list/20151003css04.png" alt="" />
|
||
这里再讲一个补充的知识：<code><link></code>标签的 rel 属性：。其属性值有以下两种：</p>
|
||
<ul>
|
||
<li><code>stylesheet</code>：定义的样式表</li>
|
||
<li><code>alternate stylesheet</code>：候选的样式表
|
||
看字面意思可能比较难理解，我们来举个例子，一下子就明白了。 举例：
|
||
现在我们来定义 3 个样式表：
|
||
a.css：定义一个实线的黑色边框</li>
|
||
</ul>
|
||
<pre><code class="language-css">div {
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 3px solid black;
|
||
}
|
||
</code></pre>
|
||
<p>ba.css：蓝色的虚线边框</p>
|
||
<pre><code class="language-css">div {
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 3px dotted blue;
|
||
}
|
||
</code></pre>
|
||
<p>c.css：来个背景图片</p>
|
||
<pre><code class="language-css">div {
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 3px solid red;
|
||
background-image: url("1.jpg");
|
||
}
|
||
</code></pre>
|
||
<p>然后我们在 html 文件中引用三个样式表：</p>
|
||
<pre><code class="language-html"><link rel = "stylesheet" type = "text/css" href = "a.css"></link>
|
||
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
|
||
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>
|
||
</code></pre>
|
||
<p>上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）
|
||
<img src="../../img_list/20151003css05.gif" alt="" /></p>
|
||
<h2 id="css-的四种基本选择器"><a class="header" href="#css-的四种基本选择器">CSS 的四种基本选择器</a></h2>
|
||
<p>CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
|
||
CSS 的选择器分为两大类：基本选择题和扩展选择器。
|
||
基本选择器：</p>
|
||
<ul>
|
||
<li>标签选择器：针对一类标签</li>
|
||
<li>ID 选择器：针对某一个特定的标签使用</li>
|
||
<li>类选择器：针对你想要的所有标签使用</li>
|
||
<li>通用选择器（通配符）：针对所有的标签都适用（不建议使用）
|
||
下面来分别讲一讲。</li>
|
||
</ul>
|
||
<h3 id="1标签选择器选择器的名字代表-html-页面上的标签"><a class="header" href="#1标签选择器选择器的名字代表-html-页面上的标签">1、标签选择器：选择器的名字代表 html 页面上的标签</a></h3>
|
||
<p>标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
|
||
举例：</p>
|
||
<pre><code class="language-html">p{ font-size:14px; }
|
||
</code></pre>
|
||
<p>上方选择器的意思是说：所有的<code><p></code>标签里的内容都将显示 14 号字体。
|
||
效果：
|
||
<img src="../../img_list/20151003css06.png" alt="" />
|
||
再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用<code><span></code>标签把“前端”这两个字围起来，然后给<code><span></code>标签加一个标签选择器。
|
||
代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
span {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<p>生命壹号学完了安卓，继续学<span>前端</span>哟</p>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>【总结】需要注意的是：
|
||
（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
|
||
（2）无论这个标签藏的多深，一定能够被选择上。
|
||
（3）选择的所有，而不是一个。</p>
|
||
<h3 id="2id-选择器规定用来定义"><a class="header" href="#2id-选择器规定用来定义">2、ID 选择器：规定用<code>#</code>来定义</a></h3>
|
||
<p>针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。
|
||
举例：</p>
|
||
<pre><code class="language-html">#mytitle{ border:3px dashed green; }
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css08.png" alt="" />
|
||
id 选择器的选择符是“#”。
|
||
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：</p>
|
||
<ul>
|
||
<li>（1）只能有字母、数字、下划线。</li>
|
||
<li>（2）必须以字母开头。</li>
|
||
<li>（3）不能和标签同名。比如 id 不能叫做 body、img、a。
|
||
另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的
|
||
div，是非法的！
|
||
一个标签可以被多个 css 选择器选择：
|
||
比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签。如下：
|
||
<img src="../../img_list/20170710_1737.png" alt="" />
|
||
然后我们通过网页的审查元素看一下效果：
|
||
<img src="../../img_list/20170711_1540.png" alt="" />
|
||
现在，假设选择器冲突了，比如 id 选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ 实际上，css 有着非常严格的计算公式，能够处理冲突.
|
||
一个标签可以被多个 css 选择器选择，共同作用，这就是“层叠式”的第一层含义（第一层含义和第二层含义，放到 css 基础的第三篇文章里讲）。</li>
|
||
</ul>
|
||
<h3 id="3类选择器规定用圆点来定义"><a class="header" href="#3类选择器规定用圆点来定义">3、类选择器：规定用圆点<code>.</code>来定义</a></h3>
|
||
<p>、针对你想要的所有标签使用。优点：灵活。
|
||
css 中用<code>.</code>来表示类。举例如下：</p>
|
||
<pre><code class="language-html">.one{ width:800px; }
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css07.png" alt="" />
|
||
和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：</p>
|
||
<ul>
|
||
<li>特性 1：类选择器可以被多种标签使用。</li>
|
||
<li>特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）</li>
|
||
</ul>
|
||
<pre><code class="language-html"><h3 class="teshu zhongyao">我是一个h3啊</h3>
|
||
</code></pre>
|
||
<p>初学者常见的错误，就是写成了两个 class。举例如下：（错误）</p>
|
||
<pre><code class="language-html"><h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
|
||
</code></pre>
|
||
<p>类选择器使用的举例：
|
||
类选择器的使用，能够决定一个人的 css 水平。
|
||
比如，我们现在要做下面这样一个页面：
|
||
<img src="../../img_list/20170711_1639.png" alt="" />
|
||
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应 css 里的代码如下：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
.lv {
|
||
color: green;
|
||
}
|
||
.da {
|
||
font-size: 30px;
|
||
}
|
||
.underline {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>然后让每个标签去选取自己想要用的类选择器：</p>
|
||
<pre><code class="language-html"><p class="lv da">段落1</p>
|
||
<p class="lv xian">段落2</p>
|
||
<p class="da xian">段落3</p>
|
||
|
||
|
||
</code></pre>
|
||
<p>也就是说：
|
||
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
|
||
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
|
||
问题：到底用 id 还是用 class？
|
||
答案：尽可能的用 class，除非极特殊的情况可以用 id。
|
||
原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有
|
||
id 的元素，有动态效果。
|
||
举例如下：
|
||
<img src="../../img_list/20170711_1706.png" alt="" />
|
||
上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。
|
||
我们记住这句话：类上样式，id 上行为。意思是说，<code>class</code>属性交给 css 使用，<code>id</code>属性交给 js 使用。
|
||
上面这三种选择器的区别：</p>
|
||
<ul>
|
||
<li>标签选择器针对的是页面上的一类标签。</li>
|
||
<li>ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。</li>
|
||
<li>类选择器可以被多种标签使用。</li>
|
||
</ul>
|
||
<h3 id="4通配符匹配任何标签"><a class="header" href="#4通配符匹配任何标签">4、通配符<code>*</code>：匹配任何标签</a></h3>
|
||
<p>通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
|
||
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
|
||
举例：</p>
|
||
<pre><code class="language-css">* {
|
||
margin-left: 0px;
|
||
margin-top: 0px;
|
||
}
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css09.png" alt="" /></p>
|
||
<h2 id="css-的几种高级选择器"><a class="header" href="#css-的几种高级选择器">CSS 的几种高级选择器</a></h2>
|
||
<p>高级选择器：</p>
|
||
<ul>
|
||
<li>后代选择器：用空格隔开</li>
|
||
<li>交集选择器：选择器之间紧密相连</li>
|
||
<li>并集选择器（分组选择器）：用逗号隔开</li>
|
||
<li>伪类选择器
|
||
下面详细讲一下这几种高级（扩展）选择器。</li>
|
||
</ul>
|
||
<h3 id="1后代选择器-定义的时候用空格隔开"><a class="header" href="#1后代选择器-定义的时候用空格隔开">1、后代选择器: 定义的时候用空格隔开</a></h3>
|
||
<p>对于<code>E F</code>这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。
|
||
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
|
||
后代选择器，描述的是祖先结构。
|
||
看定义可能有点难理解，我们来看例子吧。
|
||
举例 1：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
.div1 p {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>空格就表示后代。<code>.div1 p</code> 表示<code>.div1</code>的后代所有的<code>p</code>。
|
||
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
|
||
举例：</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
h3 b i {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>上方代码的意思是说：定义了<code><h3></code>标签中的<code><b></code>标签中的<code><i></code>标签的样式。 同理：h3 和 b 和 i
|
||
标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
|
||
效果：
|
||
<img src="../../img_list/20151003css11.png" alt="" />
|
||
或者还有下面这种写法：
|
||
<img src="../../img_list/20151003css12.png" alt="" />
|
||
上面的这种写法，<code><h3></code>标签和<code><i></code>标签并不是紧挨着的，但他们保持着一种后代关系。
|
||
还有下面这种写法：（含类选择器、id 选择器都是可以的）
|
||
<img src="../../img_list/20151003css13.png" alt="" />
|
||
我们在开头说了：后代选择器，描述的是一种祖先结构。我们举个例子来说明这句话：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
div div p {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
<div class="div2">
|
||
<div class="div3">
|
||
<div class="div4">
|
||
<p>我是什么颜色？</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>上面 css 中的<code>div div p</code>，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p 元素的祖先列表：
|
||
<img src="../../img_list/20170711_1836.png" alt="" />
|
||
讲到这里，我们再提一个 sublme 的快捷键。
|
||
在 sublime 中输入<code>p#haha</code>，按 tab 键后，会生成<code><p id="haha"></p></code>。
|
||
在 sublime 中输入<code>p.haha</code>，按 tab 键后，会生成<code><p class="haha"></p></code>。</p>
|
||
<h3 id="2交集选择器定义的时候紧密相连"><a class="header" href="#2交集选择器定义的时候紧密相连">2、交集选择器：定义的时候紧密相连</a></h3>
|
||
<p>定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如<code>div.haha</code>，再比如<code>p.special</code>。
|
||
如果后一个选择器是类选择器，则写为<code>div.special</code>；如果后一个选择器 id 选择器，则写为<code>div#special</code>。
|
||
来看下面这张图就明白了：
|
||
<img src="../../img_list/20170711_1851.png" alt="" /></p>
|
||
<pre><code class="language-css">h3.special {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。
|
||
举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>交集选择器测试</title>
|
||
<style type="text/css">
|
||
h3.special {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h3 class="special zhongyao">标题1</h3>
|
||
<h3 class="special">我也是标题</h3>
|
||
<p>我是段落</p>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20170711_1852.png" alt="" />
|
||
注意，交集选择器没有空格。所以，没有空格的<code>div.red</code>（交集选择器）和有空格的<code>div .red</code>（后代选择器）不是一个意思。
|
||
交集选择器可以连续交：（一般不要这么写）</p>
|
||
<pre><code class="language-css">h3.special.zhongyao {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>上面这种写法，是 IE7 开始兼容的，IE6 不兼容。</p>
|
||
<h3 id="3并集选择器定义的时候用逗号隔开"><a class="header" href="#3并集选择器定义的时候用逗号隔开">3、并集选择器：定义的时候用逗号隔开</a></h3>
|
||
<p>三种基本选择器都可以放进来。
|
||
举例：</p>
|
||
<pre><code class="language-css">p,
|
||
h1,
|
||
#mytitle,
|
||
.one {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css10.png" alt="" /></p>
|
||
<h2 id="一些-css3-选择器"><a class="header" href="#一些-css3-选择器">一些 CSS3 选择器</a></h2>
|
||
<blockquote>
|
||
<p>所有的 CSS3 选择器，我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。</p>
|
||
</blockquote>
|
||
<h3 id="浏览器的兼容性问题"><a class="header" href="#浏览器的兼容性问题">浏览器的兼容性问题</a></h3>
|
||
<blockquote>
|
||
<p>我们可以用<code>IETester</code>这个软件测一下 CSS 在各个版本 IE 浏览器上的显示效果。
|
||
IE： 微软的浏览器，随着操作系统安装的。所以每个 windows 都有 IE 浏览器。各版本如下：</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>windows xp 操作系统安装的 IE6</li>
|
||
<li>windows vista 操作系统安装的 IE7</li>
|
||
<li>windows 7 操作系统安装的 IE8</li>
|
||
<li>windows 8 操作系统安装的 IE9</li>
|
||
<li>windows10 操作系统安装的 edge
|
||
浏览器兼容问题，要出，就基本上就是出在 IE6、7 身上，这两个浏览器是非常低级的浏览器。
|
||
为了测试浏览器 CSS 3 的兼容性，我们可以在网上搜“css3 机器猫“关键字，然后在不同的浏览器中打开如下链接：</li>
|
||
<li><a href="http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/">http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/</a>
|
||
测试结果如下：
|
||
<img src="../../img_list/20170711_1939.png" alt="" />
|
||
我们可以在<a href="http://tongji.baidu.com/data/">百度统计</a>里查看浏览器的市场占有率：</li>
|
||
<li>IE9 5.94%</li>
|
||
<li>IE8 21.19%</li>
|
||
<li>IE7 4.79%</li>
|
||
<li>IE6 4.11%
|
||
我们可以在<a href="http://html5test.com/results/desktop.html">http://html5test.com/results/desktop.html</a>中查看
|
||
<img src="../../img_list/20170711_1948.png" alt="" />
|
||
我们要知道典型的 IE6 兼容问题（面试要问），但是做项目我们兼容到 IE8 即可。不解决 IE8 以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟
|
||
IE6 较劲。
|
||
我们可以用「IETester」软件看看 css 在各个浏览器中的显示效果。</li>
|
||
</ul>
|
||
<h3 id="1子代选择器用符号表示"><a class="header" href="#1子代选择器用符号表示">1.子代选择器，用符号<code>></code>表示</a></h3>
|
||
<blockquote>
|
||
<p>IE7 开始兼容，IE6 不兼容。</p>
|
||
</blockquote>
|
||
<pre><code class="language-css">div > p {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>div 的儿子 p。和 div 的后代 p 的截然不同。
|
||
能够选择：</p>
|
||
<pre><code class="language-html"><div>
|
||
<p>我是div的儿子</p>
|
||
</div>
|
||
</code></pre>
|
||
<p>不能选择：</p>
|
||
<pre><code class="language-html"><div>
|
||
<ul>
|
||
<li>
|
||
<p>我是div的重孙子</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</code></pre>
|
||
<h3 id="2序选择器"><a class="header" href="#2序选择器">2.序选择器</a></h3>
|
||
<blockquote>
|
||
<p>IE8 开始兼容；IE6、7 都不兼容
|
||
设置无序列表<code><ul></code>中的第一个<code><li></code>为红色：</p>
|
||
</blockquote>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
ul li:first-child {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>设置无序列表<code><ul></code>中的最后一个<code><li></code>为红色：</p>
|
||
<pre><code class="language-css">ul li:last-child {
|
||
color: blue;
|
||
}
|
||
</code></pre>
|
||
<p>序选择器还有更复杂的用法，以后再讲。
|
||
由于浏览器的更新需要过程，所以现在如果公司还要求兼容 IE6、7，那么就要自己写类名：</p>
|
||
<pre><code class="language-html"><ul>
|
||
<li class="first">项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li>项目</li>
|
||
<li class="last">项目</li>
|
||
</ul>
|
||
</code></pre>
|
||
<p>用类选择器来选择第一个或者最后一个：</p>
|
||
<pre><code class="language-html">ul li.first{ color:red; } ul li.last{ color:blue; }
|
||
</code></pre>
|
||
<h3 id="3下一个兄弟选择器"><a class="header" href="#3下一个兄弟选择器">3.下一个兄弟选择器</a></h3>
|
||
<blockquote>
|
||
<p>IE7 开始兼容，IE6 不兼容。
|
||
<code>+</code>表示选择下一个兄弟</p>
|
||
</blockquote>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
h3 + p {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>上方的选择器意思是：选择的是 h3 元素后面紧挨着的第一个兄弟。</p>
|
||
<pre><code class="language-html"><h3>我是一个标题</h3>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<h3>我是一个标题</h3>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<h3>我是一个标题</h3>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<p>我是一个段落</p>
|
||
<h3>我是一个标题</h3>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20170711_1950.png" alt="" />
|
||
这种选择器作用不大。</p>
|
||
<blockquote>
|
||
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8280814.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
|
||
GitHub 上关注我，一起入门和进阶前端。
|
||
以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="伪类伪类选择器"><a class="header" href="#伪类伪类选择器">伪类（伪类选择器）</a></h2>
|
||
<p>伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
|
||
比如 div 是属于 box 类，这一点很明确，就是属于 box 类。但是 a
|
||
属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。</p>
|
||
<h3 id="静态伪类和动态伪类"><a class="header" href="#静态伪类和动态伪类">静态伪类和动态伪类</a></h3>
|
||
<p>伪类选择器分为两种。
|
||
（1）静态伪类：只能用于超链接的样式。如下：</p>
|
||
<ul>
|
||
<li><code>:link</code> 超链接点击之前</li>
|
||
<li><code>:visited</code> 链接被访问过之后
|
||
PS：以上两种样式，只能用于超链接。
|
||
（2）动态伪类：针对所有标签都适用的样式。如下：</li>
|
||
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
|
||
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。</li>
|
||
<li><code>:focus</code> 是某个标签获得焦点时的样式（比如某个输入框获得焦点）</li>
|
||
</ul>
|
||
<h2 id="超链接-a-标签"><a class="header" href="#超链接-a-标签">超链接 a 标签</a></h2>
|
||
<h3 id="超链接的四种状态"><a class="header" href="#超链接的四种状态">超链接的四种状态</a></h3>
|
||
<p>a 标签有 4 种伪类（即对应四种状态），要求背诵。如下：</p>
|
||
<ul>
|
||
<li><code>:link</code> “链接”：超链接点击之前</li>
|
||
<li><code>:visited</code> “访问过的”：链接被访问过之后</li>
|
||
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
|
||
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。
|
||
对应的代码如下：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
/*让超链接点击之前是红色*/
|
||
a:link {
|
||
color: red;
|
||
}
|
||
/*让超链接点击之后是绿色*/
|
||
a:visited {
|
||
color: orange;
|
||
}
|
||
/*鼠标悬停，放到标签上的时候*/
|
||
a:hover {
|
||
color: green;
|
||
}
|
||
/*鼠标点击链接，但是不松手的时候*/
|
||
a:active {
|
||
color: black;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>记住，在 css 中，这四种状态必须按照固定的顺序写：</p>
|
||
<blockquote>
|
||
<p>a:link 、a:visited 、a:hover 、a:active
|
||
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
|
||
看一下这四种状态的动图效果：
|
||
<img src="../../img_list/20180113_2239.gif" alt="" /></p>
|
||
</blockquote>
|
||
<h3 id="超链接的美化"><a class="header" href="#超链接的美化">超链接的美化</a></h3>
|
||
<p>问：既然<code>a{}</code>定义了超链的属性，和<code>a:link{}</code>定义了超链点击之前的属性，那这两个有啥区别呢？
|
||
答：
|
||
<code>a{}</code>和<code>a:link{}</code>的区别：</p>
|
||
<ul>
|
||
<li><code>a{}</code>定义的样式针对所有的超链接(包括锚点)</li>
|
||
<li><code>a:link{}</code>定义的样式针对所有写了 href 属性的超链接(不包括锚点)
|
||
超链接 a 标签在使用的时候，比较难。因为不仅仅要控制 a 这个盒子，也要控制它的伪类。
|
||
我们一定要将 a 标签写在前面，将<code>:link、:visited、:hover、:active</code>这些伪类写在后面。
|
||
针对超链接，我们来举个例子：
|
||
<img src="../../img_list/20170810_2235.gif" alt="" />
|
||
为了实现上面这个效果，完整版代码如下：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.nav {
|
||
width: 960px;
|
||
height: 50px;
|
||
border: 1px solid red;
|
||
margin: 100px auto;
|
||
}
|
||
.nav ul {
|
||
/*去掉小圆点*/
|
||
list-style: none;
|
||
}
|
||
.nav ul li {
|
||
float: left;
|
||
width: 120px;
|
||
height: 50px;
|
||
/*让内容水平居中*/
|
||
text-align: center;
|
||
/*让行高等于nav的高度，就可以保证内容垂直居中*/
|
||
line-height: 50px;
|
||
}
|
||
.nav ul li a {
|
||
display: block;
|
||
width: 120px;
|
||
height: 50px;
|
||
}
|
||
/*两个伪类的属性，可以用逗号隔开*/
|
||
.nav ul li a:link,
|
||
.nav ul li a:visited {
|
||
text-decoration: none;
|
||
background-color: purple;
|
||
color: white;
|
||
}
|
||
.nav ul li a:hover {
|
||
background-color: orange;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="nav">
|
||
<ul>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
<li><a href="#">网站栏目</a></li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>上方代码中，我们发现，当我们在定义<code>a:link</code>和
|
||
<code>a:visited</code>这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：</p>
|
||
<pre><code class="language-css">.nav ul li a {
|
||
display: block;
|
||
width: 120px;
|
||
height: 50px;
|
||
}
|
||
/*两个伪类的属性，可以用逗号隔开*/
|
||
.nav ul li a:link,
|
||
.nav ul li a:visited {
|
||
text-decoration: none;
|
||
background-color: purple;
|
||
color: white;
|
||
}
|
||
.nav ul li a:hover {
|
||
background-color: orange;
|
||
}
|
||
</code></pre>
|
||
<p>如上方代码所示，最标准的写法，就是把 link、visited、hover 这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写
|
||
link、visited 也挺兼容。写法是：</p>
|
||
<blockquote>
|
||
<p>a:link、a:visited 都是可以省略的，简写在 a 标签里面。也就是说，a 标签涵盖了 link、visited
|
||
的状态（前提是都具有了相同的属性）。写法如下：</p>
|
||
</blockquote>
|
||
<pre><code class="language-css">.nav ul li a {
|
||
display: block;
|
||
width: 120px;
|
||
height: 50px;
|
||
text-decoration: none;
|
||
background-color: purple;
|
||
color: white;
|
||
}
|
||
.nav ul li a:hover {
|
||
background-color: orange;
|
||
}
|
||
</code></pre>
|
||
<p>当然了，在写<code>a:link</code>、<code>a:visited</code>这两个伪类的时候，要么同时写，要么同时不写。如果只写<code>a</code>属性和<code>a:link</code>属性，不规范。</p>
|
||
<h2 id="动态伪类举例"><a class="header" href="#动态伪类举例">动态伪类举例</a></h2>
|
||
<p>我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。</p>
|
||
<ul>
|
||
<li><code>:hover</code> “悬停”：鼠标放到标签上的时候</li>
|
||
<li><code>:active</code> “激活”： 鼠标点击标签，但是不松手时。</li>
|
||
<li><code>:focus</code> 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
|
||
我们不妨来举下例子。
|
||
举例 1：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
/*
|
||
伪类选择器：动态伪类
|
||
*/
|
||
/*
|
||
让文本框获取焦点时：
|
||
边框：#FF6F3D这种橙色
|
||
文字：绿色
|
||
背景色：#6a6a6a这种灰色
|
||
*/
|
||
input:focus {
|
||
border: 3px solid #ff6f3d;
|
||
color: white;
|
||
background-color: #6a6a6a;
|
||
}
|
||
/*
|
||
鼠标放在标签上时显示蓝色
|
||
*/
|
||
label:hover {
|
||
color: blue;
|
||
}
|
||
/*
|
||
点击标签鼠标没有松开时显示红色
|
||
*/
|
||
label:active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css02.gif" alt="" />
|
||
利用这个<code>hover</code>属性，我们同样对表格做一个样式的设置： 表格举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="Generator" content="EditPlus®" />
|
||
<meta name="Author" content="" />
|
||
<meta name="Keywords" content="" />
|
||
<meta name="Description" content="" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
/*整个表格的样式*/
|
||
table {
|
||
width: 300px;
|
||
height: 200px;
|
||
border: 1px solid blue;
|
||
/*border-collapse属性：对表格的线进行折叠*/
|
||
border-collapse: collapse;
|
||
}
|
||
/*鼠标悬停时，让当前行显示#868686这种灰色*/
|
||
table tr:hover {
|
||
background: #868686;
|
||
}
|
||
/*每个单元格的样式*/
|
||
table td {
|
||
border: 1px solid red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<table>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</table>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css04.gif" alt="" /></p>
|
||
<blockquote>
|
||
<p>本文最初于 2017-07-29
|
||
发表于<a href="http://www.cnblogs.com/smyhvae/p/7253929.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新前端的系列文章。欢迎在
|
||
GitHub 上关注我，一起入门和进阶前端。
|
||
以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="本文重点"><a class="header" href="#本文重点">本文重点</a></h2>
|
||
<ul>
|
||
<li>CSS 的继承性</li>
|
||
<li>CSS 的层叠性</li>
|
||
<li>计算权重</li>
|
||
<li>权重问题大总结</li>
|
||
<li>CSS 样式表的冲突的总结</li>
|
||
<li>权重问题深入</li>
|
||
<li>同一个标签，携带了多个类名</li>
|
||
<li>!important 标记</li>
|
||
</ul>
|
||
<h2 id="css-的继承性"><a class="header" href="#css-的继承性">CSS 的继承性</a></h2>
|
||
<p>我们来看下面这样的代码，来引入继承性：
|
||
<img src="../../img_list/20170724_2359.png" alt="" />
|
||
上方代码中，我们给 div 标签增加红色属性，却发现，div 里的每一个子标签<code><p></code>也增加了红色属性。于是我们得到这样的结论：</p>
|
||
<blockquote>
|
||
<p>有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
|
||
继承性是从自己开始，直到最小的元素。
|
||
但是呢，如果再给上方的代码加一条属性：
|
||
<img src="../../img_list/20170725_2122.jpg" alt="" />
|
||
上图中，我们给 div 加了一个 border，但是发现只有 div 具备了 border 属性，而 p 标签却没有 border 属性。于是我们可以得出结论：</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。</li>
|
||
<li>关于盒子、定位、布局的属性，都不能继承。
|
||
以后当我们谈到 css 有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。</li>
|
||
</ul>
|
||
<h2 id="css-的层叠性"><a class="header" href="#css-的层叠性">CSS 的层叠性</a></h2>
|
||
<p>很多公司如果要笔试，那么一定会考层叠性。</p>
|
||
<h3 id="层叠性计算权重"><a class="header" href="#层叠性计算权重">层叠性：计算权重</a></h3>
|
||
<p>层叠性：就是 css 处理冲突的能力。 所有的权重计算，没有任何兼容问题！
|
||
CSS 像艺术家一样优雅，像工程师一样严谨。
|
||
我们来看一个例子，就知道什么叫层叠性了。
|
||
<img src="../../img_list/20170725_2132.png" alt="" />
|
||
上图中，三种选择器同时给 P 标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
|
||
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：</p>
|
||
<ul>
|
||
<li>id 选择器</li>
|
||
<li>类选择器、属性选择器、伪类选择器</li>
|
||
<li>标签选择器、伪元素选择器
|
||
因为对于相同方式的样式表，其选择器排序的优先级为：ID 选择器 > 类选择器 > 标签选择器
|
||
针对上面这句话，我们接下来举一些复杂一点的例子。</li>
|
||
</ul>
|
||
<h3 id="层叠性举例"><a class="header" href="#层叠性举例">层叠性举例</a></h3>
|
||
<h4 id="举例-1计算权重"><a class="header" href="#举例-1计算权重">举例 1：计算权重</a></h4>
|
||
<p><img src="../../img_list/20170725_2138.png" alt="" />
|
||
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
|
||
PS：不进位，实际上能进位（奇淫知识点：255 个标签，等于 1 个类名）但是没有实战意义！</p>
|
||
<h4 id="举例-2权重相同时"><a class="header" href="#举例-2权重相同时">举例 2：权重相同时</a></h4>
|
||
<p><img src="../../img_list/20170725_2250.png" alt="" />
|
||
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。</p>
|
||
<h4 id="举例-3具有实战性的例子"><a class="header" href="#举例-3具有实战性的例子">举例 3：具有实战性的例子</a></h4>
|
||
<p><img src="../../img_list/20170726_2221.png" alt="" />
|
||
现在我要让一个列表实现上面的这种样式：第一个 li 为红色，剩下的 li 全部为蓝色。
|
||
如果写成下面这种代码是无法实现的：
|
||
<img src="../../img_list/20170726_2225.png" alt="" />
|
||
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
|
||
正确的做法是：（非常重要）
|
||
<img src="../../img_list/20170726_2229.png" alt="" />
|
||
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：所有人当中，让某一个人为红，让其他所有人为蓝。
|
||
这种方式好用是好用，但用好很难。
|
||
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。
|
||
上面这个例子很具有实战性。</p>
|
||
<h4 id="举例-4继承性造成的影响"><a class="header" href="#举例-4继承性造成的影响">举例 4：继承性造成的影响</a></h4>
|
||
<p>这里需要声明一点：</p>
|
||
<blockquote>
|
||
<p>如果不能直接选中某个元素，通过继承性影响的话，那么权重是 0。
|
||
为了验证上面这句话，我们来看看下面这样的例子：
|
||
<img src="../../img_list/20170727_0843.png" alt="" />
|
||
另外：如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的。举例如下：(box3 描述得最近，所以采用 box3 的属性)
|
||
<img src="../../img_list/20190122_1530.png" alt="" />
|
||
上方代码的文字版如下：</p>
|
||
</blockquote>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="">
|
||
<head>
|
||
<meta />
|
||
<meta />
|
||
<meta />
|
||
<title>Document</title>
|
||
<style>
|
||
#box1 {
|
||
color: red;
|
||
}
|
||
#box2 {
|
||
color: green;
|
||
}
|
||
#box3 {
|
||
color: blue;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="box1">
|
||
<div id="box2">
|
||
<div id="box3"><p>猜猜我是什么颜色</p></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<h3 id="层叠性权重计算的问题大总结非常重要"><a class="header" href="#层叠性权重计算的问题大总结非常重要">层叠性：权重计算的问题大总结（非常重要）</a></h3>
|
||
<p>层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css 有着严格的处理冲突的机制。
|
||
通过列举上面几个例子，我们对权重问题做一个总结。
|
||
<img src="../../img_list/20170727_2050.png" alt="" />
|
||
上面这个图非常重要，我们针对这个图做一个文字描述：</p>
|
||
<ul>
|
||
<li>选择上了，数权重，(id 的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。</li>
|
||
<li>没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。</li>
|
||
</ul>
|
||
<h3 id="css-样式表的冲突的总结"><a class="header" href="#css-样式表的冲突的总结">CSS 样式表的冲突的总结</a></h3>
|
||
<ul>
|
||
<li>1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）</li>
|
||
<li>2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID 选择器 > 类选择器 > 标签选择器</li>
|
||
<li>3、外部样式表的 ID 选择器 > 内嵌样式表的标签选择器</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>总结：就近原则。ID 选择器优先级最大。
|
||
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
||
<img src="../../img_list/20151003css14.png" alt="" />
|
||
另外还有两个冲突的情况：</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的 CSS 样式表中，谁最近，就用谁。</li>
|
||
<li>2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html 文件中，引用样式表的位置越近，就用谁。
|
||
例如：
|
||
<img src="../../img_list/20151003css16.png" alt="" /></li>
|
||
</ul>
|
||
<h3 id="题目演示"><a class="header" href="#题目演示">题目演示</a></h3>
|
||
<p>CSS 的层叠性讲完了，我们来做几个题目吧。</p>
|
||
<h4 id="题目-1"><a class="header" href="#题目-1">题目 1</a></h4>
|
||
<p><img src="../../img_list/20170727_0851.png" alt="" /></p>
|
||
<h4 id="题目-2"><a class="header" href="#题目-2">题目 2</a></h4>
|
||
<p><img src="../../img_list/20170727_0853.png" alt="" /></p>
|
||
<h4 id="题目-3"><a class="header" href="#题目-3">题目 3</a></h4>
|
||
<p><img src="../../img_list/20170727_0855.png" alt="" /></p>
|
||
<h4 id="题目-4"><a class="header" href="#题目-4">题目 4</a></h4>
|
||
<p><img src="../../img_list/20170727_0857.png" alt="" /></p>
|
||
<h2 id="权重问题深入"><a class="header" href="#权重问题深入">权重问题深入</a></h2>
|
||
<h3 id="同一个标签携带了多个类名有冲突"><a class="header" href="#同一个标签携带了多个类名有冲突">同一个标签，携带了多个类名，有冲突：</a></h3>
|
||
<p>这里需要补充两种冲突的情况：</p>
|
||
<ul>
|
||
<li>1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：定义的样式表中，谁最近，就用谁。</li>
|
||
<li>2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html 文件中，引用样式表的位置越近，就用谁。
|
||
例如：（就近原则）
|
||
<img src="../../img_list/20170727_2021.png" alt="" />
|
||
上图中，文字显示的颜色均为红色。因为这和在标签中的挂类名的书序无关，只和 css 的顺序有关。</li>
|
||
</ul>
|
||
<h3 id="important-标记优先级最高"><a class="header" href="#important-标记优先级最高">!important 标记：优先级最高</a></h3>
|
||
<p>来看个很简单的例子：
|
||
<img src="../../img_list/20170727_2029.png" alt="" />
|
||
上图中，显然 id 选择器的权重最大，所以文字的颜色是红色。
|
||
如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个<code>!important</code>标记，此时其权重为无穷大。如下：
|
||
<img src="../../img_list/20170727_2035_2.png" alt="" />
|
||
important 是英语里面的“重要的”的意思。我们可以通过如下语法：</p>
|
||
<pre><code>k:v !important;
|
||
</code></pre>
|
||
<p>来给一个属性提高权重。这个属性的权重就是无穷大。
|
||
注意，一定要注意语法的正确性。
|
||
正确的语法：</p>
|
||
<pre><code>font-size:60px !important;
|
||
</code></pre>
|
||
<p>错误的语法：</p>
|
||
<pre><code>font-size:60px; !important; 不能把!important写在外面
|
||
font-size:60px important; 不能忘记感叹号
|
||
</code></pre>
|
||
<p><code>!important</code>标记需要强调如下 3 点：
|
||
（1）!important 提升的是一个属性，而不是一个选择器</p>
|
||
<pre><code class="language-css">p{
|
||
color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
|
||
font-size: 100px ; 这条属性没有写!important，所以没有提升权重
|
||
}
|
||
#para1{
|
||
color:blue;
|
||
font-size: 50px;
|
||
}
|
||
.spec{
|
||
color:green;
|
||
font-size: 20px;
|
||
}
|
||
</code></pre>
|
||
<p>所以，综合来看，字体颜色是 red（听 important 的）；字号是 50px（听 id 的）。
|
||
（2）!important 无法提升继承的权重，该是 0 还是 0
|
||
比如 HTML 结构：</p>
|
||
<pre><code class="language-html"><div>
|
||
<p>哈哈哈哈哈哈哈哈</p>
|
||
</div>
|
||
</code></pre>
|
||
<p>有 CSS 样式：</p>
|
||
<pre><code class="language-css">div {
|
||
color: red !important;
|
||
}
|
||
p {
|
||
color: blue;
|
||
}
|
||
</code></pre>
|
||
<p>由于 div 是通过继承性来影响文字颜色的，所以!important 无法提升它的权重，权重依然是 0。
|
||
干不过 p 标签，因为 p 标签是实实在在选中了，所以字是蓝色的（以 p 为准）。
|
||
(3)!important 不影响就近原则
|
||
如果大家都是继承来的，按理说应该按照“就近原则”，那么 important 能否影响就近原则呢？ 答案是：不影响。远的，永远是远的。不能给远的写一个
|
||
important，干掉近的。
|
||
为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：
|
||
<img src="../../img_list/20170727_2046.png" alt="" />
|
||
PS：做网站的时候，!important 尽量不要用。否则会让 css 写的很乱。</p>
|
||
<h2 id="知识回顾"><a class="header" href="#知识回顾">知识回顾</a></h2>
|
||
<blockquote>
|
||
<p>我们把以上内容和上一篇文章做一个简单的知识回顾。</p>
|
||
</blockquote>
|
||
<h3 id="css-属性"><a class="header" href="#css-属性">CSS 属性</a></h3>
|
||
<blockquote>
|
||
<p>css 属性，面试的时候会有笔试，笔试没有智能提示的。
|
||
加粗，倾斜，下划线：</p>
|
||
</blockquote>
|
||
<pre><code>font-weight:bold;
|
||
font-style:italic;
|
||
text-decoration:underline;
|
||
</code></pre>
|
||
<p>背景颜色、前景色：</p>
|
||
<pre><code>background-color:red;
|
||
color:red;
|
||
</code></pre>
|
||
<h3 id="class-和-id-的区别"><a class="header" href="#class-和-id-的区别">class 和 id 的区别</a></h3>
|
||
<p>class 用于 css 的，id 用于 js 的。
|
||
1）class 页面上可以重复。id 页面上唯一，不能重复。 2）一个标签可以有多个 class，用空格隔开。但是 id 只能有 id。</p>
|
||
<h3 id="各种选择器浏览器兼容性"><a class="header" href="#各种选择器浏览器兼容性">各种选择器(浏览器兼容性)</a></h3>
|
||
<p>IE6 层面兼容的选择器： 标签选择器、id 选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：</p>
|
||
<pre><code>p
|
||
#box
|
||
.spec
|
||
div p
|
||
div.spec
|
||
div,p
|
||
*
|
||
</code></pre>
|
||
<p>IE7 能够兼容的：儿子选择器、下一个兄弟选择器。如下：</p>
|
||
<pre><code>div>p
|
||
h3+p
|
||
</code></pre>
|
||
<p>IE8 能够兼容的：</p>
|
||
<pre><code>ul li:first-child
|
||
ul li:last-child
|
||
</code></pre>
|
||
<h3 id="css-两个性质"><a class="header" href="#css-两个性质">css 两个性质</a></h3>
|
||
<ul>
|
||
<li>继承性：好的事儿。继承从上到下，哪些能？哪些不能？</li>
|
||
<li>层叠性：冲突，多个选择器描述了同一个属性，听谁的？
|
||
再看几个题目：
|
||
<img src="../../img_list/20170727_0900.png" alt="" />
|
||
<img src="../../img_list/20170727_0901.png" alt="" />
|
||
<img src="../../img_list/20170727_0902.png" alt="" />
|
||
<img src="../../img_list/20170727_0903.png" alt="" /></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新。以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="盒子模型"><a class="header" href="#盒子模型">盒子模型</a></h2>
|
||
<h3 id="前言-1"><a class="header" href="#前言-1">前言</a></h3>
|
||
<p>盒子模型，英文即 box model。无论是 div、span、还是 a 都是盒子。
|
||
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。</p>
|
||
<h3 id="盒子中的区域"><a class="header" href="#盒子中的区域">盒子中的区域</a></h3>
|
||
<p>一个盒子中主要的属性就 5 个：width、height、padding、border、margin。如下：</p>
|
||
<ul>
|
||
<li>width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。</li>
|
||
<li>padding：内边距。</li>
|
||
<li>border：边框。</li>
|
||
<li>margin：外边距。
|
||
盒子模型的示意图：
|
||
<img src="../../img_list/20170727_2128.png" alt="" />
|
||
代码演示：
|
||
<img src="../../img_list/20170727_2326.png" alt="" />
|
||
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是 302*302。 这是因为还要加上 padding、border。
|
||
注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。</li>
|
||
</ul>
|
||
<h3 id="标准盒模型和-ie-盒模型"><a class="header" href="#标准盒模型和-ie-盒模型">标准盒模型和 IE 盒模型</a></h3>
|
||
<blockquote>
|
||
<p>我们目前所学习的知识中，以标准盒子模型为准。
|
||
标准盒子模型：
|
||
<img src="../../img_list/20151003css27.jpg" alt="" />
|
||
IE 盒子模型：
|
||
<img src="../../img_list/20151003css30.jpg" alt="" />
|
||
上图显示：
|
||
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。</li>
|
||
<li>padding：内边距。</li>
|
||
<li>border：边框。</li>
|
||
<li>margin：外边距。
|
||
CSS 盒模型和 IE 盒模型的区别：</li>
|
||
<li>在 <font color="#0000FF">标准盒子模型</font>中，<font color="#0000FF">width 和 height
|
||
指的是内容区域</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。</li>
|
||
<li><font color="#0000FF">IE 盒子模型</font>中，<font color="#0000FF">width 和 height
|
||
指的是内容区域+border+padding</font>的宽度和高度。
|
||
注：Android 中也有 margin 和 padding 的概念，意思是差不多的，如果你会一点 Android，应该比较好理解吧。区别在于，Android
|
||
中没有 border 这个东西，而且在 Android 中，margin 并不是控件的一部分，我觉得这样做更合理一些，呵呵。</li>
|
||
</ul>
|
||
<h3 id="body标签也有-margin"><a class="header" href="#body标签也有-margin"><code><body></code>标签也有 margin</a></h3>
|
||
<p><code><body></code>标签有必要强调一下。很多人以为<code><body></code>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<code><document></code>，即浏览器。而<code><body></code>是<code><document></code>的儿子。浏览器给<code><body></code>默认的
|
||
margin 大小是 8 个像素，此时<code><body></code>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="Generator" content="EditPlus®" />
|
||
<meta name="Author" content="" />
|
||
<meta name="Keywords" content="" />
|
||
<meta name="Description" content="" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
div {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 1px solid red;
|
||
padding: 20px;
|
||
margin: 30px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>有生之年</div>
|
||
<div>狭路相逢</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>上面的代码中，我们对 div 标签设置了边距等信息。打开 google 浏览器，按住 F12，显示效果如下：
|
||
<img src="../../img_list/20151003_27.png" alt="" /></p>
|
||
<h2 id="认识-widthheight"><a class="header" href="#认识-widthheight">认识 width、height</a></h2>
|
||
<p>一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
|
||
比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：
|
||
<img src="../../img_list/20170727_2329.png" alt="" />
|
||
下面这两个盒子，真实占有宽高，都是 302*302：
|
||
盒子 1：</p>
|
||
<pre><code class="language-css">.box1 {
|
||
width: 100px;
|
||
height: 100px;
|
||
padding: 100px;
|
||
border: 1px solid red;
|
||
}
|
||
</code></pre>
|
||
<p>盒子 2：</p>
|
||
<pre><code class="language-css">.box2 {
|
||
width: 250px;
|
||
height: 250px;
|
||
padding: 25px;
|
||
border: 1px solid red;
|
||
}
|
||
</code></pre>
|
||
<p>真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border
|
||
上面这两个盒子的盒模型图如下：
|
||
<img src="../../img_list/20170728_0925.png" alt="" />
|
||
如果想保持一个盒子的真实占有宽度不变，那么加 width 的时候就要减 padding。加 padding 的时候就要减
|
||
width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。</p>
|
||
<h2 id="认识-padding"><a class="header" href="#认识-padding">认识 padding</a></h2>
|
||
<h3 id="padding-区域也有颜色"><a class="header" href="#padding-区域也有颜色">padding 区域也有颜色</a></h3>
|
||
<p>padding 就是内边距。padding 的区域有背景颜色，css2.1 前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color
|
||
将填充所有 border 以内的区域。
|
||
效果如下：
|
||
<img src="../../img_list/20170728_1005.png" alt="" /></p>
|
||
<h3 id="padding-有四个方向"><a class="header" href="#padding-有四个方向">padding 有四个方向</a></h3>
|
||
<p>padding 是 4 个方向的，所以我们能够分别描述 4 个方向的 padding。
|
||
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
|
||
小属性的写法：</p>
|
||
<pre><code class="language-css">padding-top: 30px;
|
||
padding-right: 20px;
|
||
padding-bottom: 40px;
|
||
padding-left: 100px;
|
||
</code></pre>
|
||
<p>综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin 的道理也是一样的）</p>
|
||
<pre><code class="language-css">padding: 30px 20px 40px 100px;
|
||
</code></pre>
|
||
<p>如果写了四个值，则顺序为：上、右、下、左。
|
||
如果只写了三个值，则顺序为：上、右、下。??和右一样。
|
||
如果只写了两个值，比如说：</p>
|
||
<pre><code>padding: 30px 40px;
|
||
</code></pre>
|
||
<p>则顺序等价于：30px 40px 30px 40px;
|
||
要懂得，用小属性层叠大属性。比如：</p>
|
||
<pre><code>padding: 20px;
|
||
padding-left: 30px;
|
||
</code></pre>
|
||
<p>上面的 padding 对应盒子模型为：
|
||
<img src="../../img_list/20170728_1039.png" alt="" />
|
||
下面的写法：</p>
|
||
<pre><code>padding-left: 30px;
|
||
padding: 20px;
|
||
</code></pre>
|
||
<p>第一行的小属性无效，因为被第二行的大属性层叠掉了。
|
||
下面的题，会做了，说明你明白了。</p>
|
||
<h3 id="一些题目"><a class="header" href="#一些题目">一些题目</a></h3>
|
||
<p>题目 1：说出下面盒子真实占有宽高，并画出盒模型图。</p>
|
||
<pre><code class="language-css">div {
|
||
width: 200px;
|
||
height: 200px;
|
||
padding: 10px 20px 30px;
|
||
padding-right: 40px;
|
||
border: 1px solid #000;
|
||
}
|
||
</code></pre>
|
||
<p>答案：
|
||
<img src="../../img_list/20170728_1048.png" alt="" />
|
||
题目 2：说出下面盒子真实占有宽高，并画出盒模型图。</p>
|
||
<pre><code class="language-css">div {
|
||
width: 200px;
|
||
height: 200px;
|
||
padding-left: 10px;
|
||
padding-right: 20px;
|
||
padding: 40px 50px 60px;
|
||
padding-bottom: 30px;
|
||
border: 1px solid #000;
|
||
}
|
||
</code></pre>
|
||
<p>答案：
|
||
<code>padding-left:10px；</code> 和<code>padding-right:20px;</code> 没用，因为后面的 padding 大属性，层叠掉了他们。
|
||
盒子模型如下：
|
||
<img src="../../img_list/20170728_1100.png" alt="" />
|
||
题目 3：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
|
||
<img src="../../img_list/20170728_1401.png" alt="" />
|
||
答案：</p>
|
||
<pre><code class="language-css">width: 123px;
|
||
height: 123px;
|
||
padding: 20px 40px;
|
||
border: 1px solid red;
|
||
</code></pre>
|
||
<p>题目 4：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
|
||
<img src="../../img_list/20170728_1402.png" alt="" />
|
||
答案：</p>
|
||
<pre><code class="language-css">width: 123px;
|
||
height: 123px;
|
||
padding: 20px;
|
||
padding-right: 40px;
|
||
border: 1px solid red;
|
||
</code></pre>
|
||
<h3 id="一些元素默认带有-padding"><a class="header" href="#一些元素默认带有-padding">一些元素，默认带有 padding</a></h3>
|
||
<p>一些元素，默认带有<code>padding</code>，比如 ul 标签。如下：
|
||
<img src="../../img_list/20170728_1413.png" alt="" />
|
||
上图显示，不加任何样式的 ul，也是有 40px 的 padding-left。
|
||
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的 padding。
|
||
可以使用<code>*</code>进行清除：</p>
|
||
<pre><code class="language-css">* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
</code></pre>
|
||
<p>但是，<code>*</code>的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：</p>
|
||
<pre><code>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
</code></pre>
|
||
<h2 id="认识-border"><a class="header" href="#认识-border">认识 border</a></h2>
|
||
<p>border 就是边框。边框有三个要素：像素（粗细）、线型、颜色。
|
||
比如：</p>
|
||
<pre><code class="language-css">.div1 {
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 2px solid red;
|
||
}
|
||
</code></pre>
|
||
<p>颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。</p>
|
||
<h3 id="border-style"><a class="header" href="#border-style">border-style</a></h3>
|
||
<p>border 的所有的线型如下：（我们可以通过查看<code>CSS参考手册</code>得到）
|
||
<img src="../../img_list/20170728_1435.png" alt="" />
|
||
比如<code>border:10px ridge red;</code>这个属性，在 chrome 和 firefox、IE
|
||
中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
|
||
<img src="../../img_list/20170728_1619.png" alt="" />
|
||
如果公司里面的设计师是处女座的，追求极高的页面还原度，那么不能使用 css 来制作边框。就要用到图片，就要切图了。
|
||
所以，比较稳定的 border-style 就几个：solid、dashed、dotted。</p>
|
||
<h3 id="border-拆分"><a class="header" href="#border-拆分">border 拆分</a></h3>
|
||
<p>border 是一个大综合属性。比如说：</p>
|
||
<pre><code class="language-css">border: 1px solid red;
|
||
</code></pre>
|
||
<p>就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red 颜色。
|
||
PS：小技巧：在 sublime text 中，为了快速输入<code>border:1px solid red;</code>这个属性，可以直接输入<code>bd</code>，然后选第二个后回车。
|
||
border 属性是能够被拆开的，有两大种拆开的方式：</p>
|
||
<ul>
|
||
<li>（1）按三要素拆开：border-width、border-style、border-color。（一个 border 属性是由三个小属性综合而成的）</li>
|
||
<li>（2）按方向拆开：border-top、border-right、border-bottom、border-left。
|
||
现在我们明白了：一个 border 属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：</li>
|
||
</ul>
|
||
<pre><code>border-width:10px 20px;
|
||
border-style:solid dashed dotted;
|
||
border-color:red green blue yellow;
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20170728_1516.png" alt="" />
|
||
（1）按三要素拆：</p>
|
||
<pre><code class="language-css">border-width: 10px; //边框宽度
|
||
border-style: solid; //线型
|
||
border-color: red; //颜色。
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code>border:10px solid red;
|
||
</code></pre>
|
||
<p>(2)按方向来拆：</p>
|
||
<pre><code class="language-css">border-top: 10px solid red;
|
||
border-right: 10px solid red;
|
||
border-bottom: 10px solid red;
|
||
border-left: 10px solid red;
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code class="language-css">border: 10px solid red;
|
||
</code></pre>
|
||
<p>（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)</p>
|
||
<pre><code class="language-css">border-top-width: 10px;
|
||
border-top-style: solid;
|
||
border-top-color: red;
|
||
border-right-width: 10px;
|
||
border-right-style: solid;
|
||
border-right-color: red;
|
||
border-bottom-width: 10px;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: red;
|
||
border-left-width: 10px;
|
||
border-left-style: solid;
|
||
border-left-color: red;
|
||
</code></pre>
|
||
<p>等价于：</p>
|
||
<pre><code class="language-css">border: 10px solid red;
|
||
</code></pre>
|
||
<p>工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
|
||
<img src="../../img_list/20170728_1606.png" alt="" />
|
||
为了实现上方效果，写法如下：</p>
|
||
<pre><code class="language-css">border: 10px solid red;
|
||
border-right-color: blue;
|
||
</code></pre>
|
||
<p><img src="../../img_list/20170728_1608.png" alt="" />
|
||
为了实现上方效果，写法如下：</p>
|
||
<pre><code class="language-css">border: 10px solid red;
|
||
border-style: solid dashed;
|
||
</code></pre>
|
||
<p>border 可以没有：</p>
|
||
<pre><code class="language-css">border: none;
|
||
</code></pre>
|
||
<p>可以某一条边没有：</p>
|
||
<pre><code class="language-css">border-left: none;
|
||
</code></pre>
|
||
<p>也可以调整左边边框的宽度为 0：</p>
|
||
<pre><code class="language-css">border-left-width: 0;
|
||
</code></pre>
|
||
<h3 id="border-image-属性"><a class="header" href="#border-image-属性">border-image 属性</a></h3>
|
||
<p>比如：</p>
|
||
<pre><code class="language-css">border-image: url(.img.png) 30 round;
|
||
</code></pre>
|
||
<p>这个属性在实际开发中用得不多，暂时忽略。</p>
|
||
<h3 id="举例-1利用-border-属性画一个三角形小技巧"><a class="header" href="#举例-1利用-border-属性画一个三角形小技巧">举例 1：利用 border 属性画一个三角形（小技巧）</a></h3>
|
||
<p>完整代码如下：</p>
|
||
<pre><code class="language-css">div {
|
||
width: 0;
|
||
height: 0;
|
||
border: 50px solid transparent;
|
||
border-top-color: red;
|
||
border-bottom: none;
|
||
}
|
||
</code></pre>
|
||
<p>步骤如下：
|
||
（1）当我们设置盒子的 width 和 height 为 0 时，此时效果如下：
|
||
<img src="../../img_list/20170728_1639.png" alt="" />
|
||
（2）然后将 border 的底部取消：
|
||
<img src="../../img_list/20170728_1645.png" alt="" />
|
||
（3）最后设置 border 的左边和右边为白色或者透明：
|
||
<img src="../../img_list/20170728_1649.png" alt="" />
|
||
这样，一个三角形就画好了。</p>
|
||
<h3 id="举例-2利用-border-属性画一个三角形更推荐的技巧"><a class="header" href="#举例-2利用-border-属性画一个三角形更推荐的技巧">举例 2：利用 border 属性画一个三角形（更推荐的技巧）</a></h3>
|
||
<p>上面的例子 1 中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？
|
||
完整代码如下：（用 css 画等边三角形）</p>
|
||
<pre><code class="language-css">.div1 {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 30px solid red;
|
||
/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
|
||
border-left: 20px solid transparent;
|
||
border-right: 20px solid transparent;
|
||
}
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20191004_1830.png" alt="" />
|
||
另外，我们在上方代码的基础之上，再加一个 <code>border-radus: 20px;</code> 就能画出一个扇形。
|
||
关于盒模型的更多内容，请查看本项目的另外一篇文章：《13-前端面试/面试必看/02-CSS 盒模型及 BFC.md》</p>
|
||
<blockquote>
|
||
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/7297736.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新。以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="文本主要内容"><a class="header" href="#文本主要内容">文本主要内容</a></h2>
|
||
<ul>
|
||
<li>标准文档流</li>
|
||
<li>标准文档流的特性</li>
|
||
<li>行内元素和块级元素</li>
|
||
<li>行内元素和块级元素的相互转换</li>
|
||
<li>浮动的性质</li>
|
||
<li>浮动的清除</li>
|
||
<li>浏览器的兼容性问题</li>
|
||
<li>浮动中 margin 相关</li>
|
||
<li>关于 margin 的 IE6 兼容问题</li>
|
||
</ul>
|
||
<h2 id="标准文档流"><a class="header" href="#标准文档流">标准文档流</a></h2>
|
||
<p>宏观地讲，我们的 web 页面和 photoshop 等设计软件有本质的区别：web
|
||
页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。</p>
|
||
<h3 id="标准文档流的特性"><a class="header" href="#标准文档流的特性">标准文档流的特性</a></h3>
|
||
<p><strong>（1）空白折叠现象：</strong>
|
||
无论多少个空格、换行、tab，都会折叠为一个空格。
|
||
比如，如果我们想让 img 标签之间没有空隙，必须紧密连接：</p>
|
||
<pre><code><img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
|
||
</code></pre>
|
||
<p><strong>（2）高矮不齐，底边对齐：</strong>
|
||
举例如下：
|
||
<img src="../../img_list/20170729_1508_2.png" alt="" />
|
||
<strong>（3）自动换行，一行写不满，换行写。</strong></p>
|
||
<h3 id="行内元素和块级元素"><a class="header" href="#行内元素和块级元素">行内元素和块级元素</a></h3>
|
||
<p>学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：</p>
|
||
<ul>
|
||
<li>行内元素</li>
|
||
<li>块级元素
|
||
我们可以举一个例子，看看块级元素和行内元素的区别：
|
||
<img src="../../img_list/20170729_1529_2.png" alt="" />
|
||
上图中可以看到，<code>h1</code>标签是块级元素，占据了整行，<code>span</code>标签是行内元素，只占据内容这一部分。
|
||
现在我们尝试给两个标签设置宽高。效果如下：
|
||
<img src="../../img_list/20170729_1532_2.png" alt="" />
|
||
上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素<code>h1</code>生效。于是我们可以做出如下总结。
|
||
<strong>行内元素和块级元素的区别：</strong>（非常重要）
|
||
行内元素：</li>
|
||
<li>与其他行内元素并排；</li>
|
||
<li>不能设置宽、高。默认的宽度，就是文字的宽度。
|
||
块级元素：</li>
|
||
<li>霸占一行，不能与其他任何元素并列；</li>
|
||
<li>能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的 100%。
|
||
<strong>行内元素和块级元素的分类：</strong>
|
||
在以前的 HTML 知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
|
||
从 HTML 的角度来讲，标签分为：</li>
|
||
<li>文本级标签：p、span、a、b、i、u、em。</li>
|
||
<li>容器级标签：div、h 系列、li、dt、dd。</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>PS：为甚么说 p 是文本级标签呢？因为 p 里面只能放文字&图片&表单元素，p 里面不能放 h 和 ul，p 里面也不能放 p。
|
||
现在，从 CSS 的角度讲，CSS 的分类和上面的很像，就 p 不一样：</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>行内元素：除了 p 之外，所有的文本级标签，都是行内元素。p 是个文本级，但是是个块级元素。</li>
|
||
<li>块级元素：所有的容器级标签都是块级元素，还有 p 标签。
|
||
我们把上面的分类画一个图，即可一目了然：
|
||
<img src="../../img_list/20170729_1545.png" alt="" /></li>
|
||
</ul>
|
||
<h3 id="行内元素和块级元素的相互转换"><a class="header" href="#行内元素和块级元素的相互转换">行内元素和块级元素的相互转换</a></h3>
|
||
<p>我们可以通过<code>display</code>属性将块级元素和行内元素进行相互转换。display 即“显示模式”。</p>
|
||
<h4 id="块级元素可以转换为行内元素"><a class="header" href="#块级元素可以转换为行内元素">块级元素可以转换为行内元素：</a></h4>
|
||
<p>一旦，给一个块级元素（比如 div）设置：</p>
|
||
<pre><code>display: inline;
|
||
</code></pre>
|
||
<p>那么，这个标签将立即变为行内元素，此时它和一个 span 无异。inline 就是“行内”。也就是说：</p>
|
||
<ul>
|
||
<li>此时这个 div 不能设置宽度、高度；</li>
|
||
<li>此时这个 div 可以和别人并排了。
|
||
举例如下：
|
||
<img src="../../img_list/20170729_1629.png" alt="" /></li>
|
||
</ul>
|
||
<h4 id="行内元素转换为块级元素"><a class="header" href="#行内元素转换为块级元素">行内元素转换为块级元素：</a></h4>
|
||
<p>同样的道理，一旦给一个行内元素（比如 span）设置：</p>
|
||
<pre><code>display: block;
|
||
</code></pre>
|
||
<p>那么，这个标签将立即变为块级元素，此时它和一个 div 无异。block”是“块”的意思。也就是说：</p>
|
||
<ul>
|
||
<li>此时这个 span 能够设置宽度、高度</li>
|
||
<li>此时这个 span 必须霸占一行了，别人无法和他并排</li>
|
||
<li>如果不设置宽度，将撑满父亲
|
||
举例如下：
|
||
<img src="../../img_list/20170729_1638.png" alt="" />
|
||
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！<strong>脱离标准流</strong>！
|
||
css 中一共有三种手段，使一个元素脱离标准文档流：</li>
|
||
<li>（1）浮动</li>
|
||
<li>（2）绝对定位</li>
|
||
<li>（3）固定定位
|
||
这便引出我们今天要讲的内容：浮动。</li>
|
||
</ul>
|
||
<h2 id="浮动的性质"><a class="header" href="#浮动的性质">浮动的性质</a></h2>
|
||
<blockquote>
|
||
<p>浮动是 css 里面布局用的最多的属性。
|
||
现在有两个 div，分别设置宽高。我们知道，它们的效果如下：
|
||
<img src="../../img_list/20170729_1722.png" alt="" />
|
||
此时，如果给这两个 div 增加一个浮动属性，比如<code>float: left;</code>，效果如下：
|
||
<img src="../../img_list/20170729_1723.png" alt="" />
|
||
这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
|
||
浮动想学好，一定要知道三个性质。接下来讲一讲。</p>
|
||
</blockquote>
|
||
<h3 id="性质-1浮动的元素脱标"><a class="header" href="#性质-1浮动的元素脱标">性质 1：浮动的元素脱标</a></h3>
|
||
<p>脱标即脱离标准流。我们来看几个例子。
|
||
证明 1：
|
||
<img src="../../img_list/20170729_2028.png" alt="" />
|
||
上图中，在默认情况下，两个 div 标签是上下进行排列的。现在由于 float
|
||
属性让上图中的第一个<code><div></code>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<code><div></code>还在自己的层面上遵从标准流进行排列。
|
||
证明 2：
|
||
<img src="../../img_list/20180111_2320.png" alt="" />
|
||
上图中，span 标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
|
||
所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个 div 还是个
|
||
span。**所有标签，浮动之后，已经不区分行内、块级了。</p>
|
||
<h3 id="性质-2浮动的元素互相贴靠"><a class="header" href="#性质-2浮动的元素互相贴靠">性质 2：浮动的元素互相贴靠</a></h3>
|
||
<p>我们来看一个例子就明白了。
|
||
我们给三个 div 均设置了<code>float: left;</code>属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到 div 的贴靠效果：
|
||
<img src="../../img_list/20170730_1910.gif" alt="" />
|
||
上图显示，3 号如果有足够空间，那么就会靠着 2 号。如果没有足够的空间，那么会靠着 1 号大哥。 如果没有足够的空间靠着 1 号大哥，3 号自己去贴左墙。
|
||
不过 3 号自己去贴墙的时候，注意：
|
||
<img src="../../img_list/20170730_1928.gif" alt="" />
|
||
上图显示，3 号贴左墙的时候，并不会往 1 号里面挤。
|
||
同样，float 还有一个属性值是<code>right</code>，这个和属性值<code>left</code>是对称的。</p>
|
||
<h3 id="性质-3浮动的元素有字围效果"><a class="header" href="#性质-3浮动的元素有字围效果">性质 3：浮动的元素有“字围”效果</a></h3>
|
||
<p>来看一张图就明白了。我们让 div 浮动，p 不浮动。
|
||
<img src="../../img_list/20170730_2005.png" alt="" />
|
||
上图中，我们发现：<strong>div 挡住了 p，但不会挡住 p 中的文字</strong>，形成“字围”效果。
|
||
总结：<strong>标准流中的文字不会被浮动的盒子遮挡住</strong>。（文字就像水一样）
|
||
关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：<strong>永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。</strong></p>
|
||
<h3 id="性质-4收缩"><a class="header" href="#性质-4收缩">性质 4：收缩</a></h3>
|
||
<p>收缩：一个浮动的元素，如果没有设置 width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
|
||
举例如下：
|
||
<img src="../../img_list/20170801_1720.png" alt="" />
|
||
上图中，div 本身是块级元素，如果不设置 width，它会单独霸占整行；但是，设置 div 浮动后，它会收缩</p>
|
||
<h3 id="浮动的补充做网站时注意"><a class="header" href="#浮动的补充做网站时注意">浮动的补充（做网站时注意）</a></h3>
|
||
<p><img src="../../img_list/20170731_2248.png" alt="" />
|
||
上图所示，将 para1 和 para2 设置为浮动，它们是 div 的儿子。此时 para1+para2 的宽度小于 div
|
||
的宽度。效果如上图所示。可如果设置 para1+para2 的宽度大于 div 的宽度，我们会发现，para2 掉下来了：
|
||
<img src="../../img_list/20170731_2252_2.png" alt="" /></p>
|
||
<h3 id="布置一个作业"><a class="header" href="#布置一个作业">布置一个作业</a></h3>
|
||
<p>布置一个作业，要求实现下面的效果：
|
||
<img src="../../img_list/20170801_0858.png" alt="" />
|
||
为实现上方效果，代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.header {
|
||
width: 970px;
|
||
height: 103px;
|
||
/*居中。这个语句的意思是：居中：*/
|
||
margin: 0 auto;
|
||
}
|
||
.header .logo {
|
||
float: left;
|
||
width: 277px;
|
||
height: 103px;
|
||
background-color: red;
|
||
}
|
||
.header .language {
|
||
float: right;
|
||
width: 137px;
|
||
height: 49px;
|
||
background-color: green;
|
||
margin-bottom: 8px;
|
||
}
|
||
.header .nav {
|
||
float: right;
|
||
width: 679px;
|
||
height: 46px;
|
||
background-color: green;
|
||
}
|
||
.content {
|
||
width: 970px;
|
||
height: 435px;
|
||
/*居中，这个语句今天没讲，你照抄，就是居中：*/
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
.content .banner {
|
||
float: left;
|
||
width: 310px;
|
||
height: 435px;
|
||
background-color: gold;
|
||
margin-right: 10px;
|
||
}
|
||
.content .rightPart {
|
||
float: left;
|
||
width: 650px;
|
||
height: 435px;
|
||
}
|
||
.content .rightPart .main {
|
||
width: 650px;
|
||
height: 400px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.content .rightPart .links {
|
||
width: 650px;
|
||
height: 25px;
|
||
background-color: blue;
|
||
}
|
||
.content .rightPart .main .news {
|
||
float: left;
|
||
width: 450px;
|
||
height: 400px;
|
||
}
|
||
.content .rightPart .main .hotpic {
|
||
float: left;
|
||
width: 190px;
|
||
height: 400px;
|
||
background-color: purple;
|
||
margin-left: 10px;
|
||
}
|
||
.content .rightPart .main .news .news1 {
|
||
width: 450px;
|
||
height: 240px;
|
||
background-color: skyblue;
|
||
margin-bottom: 10px;
|
||
}
|
||
.content .rightPart .main .news .news2 {
|
||
width: 450px;
|
||
height: 110px;
|
||
background-color: skyblue;
|
||
margin-bottom: 10px;
|
||
}
|
||
.content .rightPart .main .news .news3 {
|
||
width: 450px;
|
||
height: 30px;
|
||
background-color: skyblue;
|
||
}
|
||
.footer {
|
||
width: 970px;
|
||
height: 35px;
|
||
background-color: pink;
|
||
/*没学，就是居中：*/
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 头部 -->
|
||
<div class="header">
|
||
<div class="logo">logo</div>
|
||
<div class="language">语言选择</div>
|
||
<div class="nav">导航条</div>
|
||
</div>
|
||
<!-- 主要内容 -->
|
||
<div class="content">
|
||
<div class="banner">大广告</div>
|
||
<div class="rightPart">
|
||
<div class="main">
|
||
<div class="news">
|
||
<div class="news1"></div>
|
||
<div class="news2"></div>
|
||
<div class="news3"></div>
|
||
</div>
|
||
<div class="hotpic"></div>
|
||
</div>
|
||
<div class="links"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 页尾 -->
|
||
<div class="footer"></div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>其实，这个页面的布局是下面这个网站：
|
||
<img src="../../img_list/20170801_0900.png" alt="" /></p>
|
||
<h2 id="浮动的清除"><a class="header" href="#浮动的清除">浮动的清除</a></h2>
|
||
<blockquote>
|
||
<p>这里所说的清除浮动，指的是清除浮动与浮动之间的影响。</p>
|
||
</blockquote>
|
||
<h3 id="前言-2"><a class="header" href="#前言-2">前言</a></h3>
|
||
<p>通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。
|
||
比如说一个网页有 header、content、footer 这三部分。就拿 content 部分来举例，如果设置 content
|
||
的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。
|
||
从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。
|
||
下面这个例子，有两个块级元素 div，div 没有任何属性，每个 div 里有 li，效果如下：
|
||
<img src="../../img_list/20170801_2122.png" alt="" />
|
||
上面这个例子很简单。可如果我们给里面的<code><li></code>标签加浮动。效果却成了下面这个样子：
|
||
代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
}
|
||
li {
|
||
float: left;
|
||
width: 100px;
|
||
height: 20px;
|
||
background-color: pink;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="box1">
|
||
<ul>
|
||
<li>生命壹号1</li>
|
||
<li>生命壹号2</li>
|
||
<li>生命壹号3</li>
|
||
<li>生命壹号4</li>
|
||
</ul>
|
||
</div>
|
||
<div class="box2">
|
||
<ul>
|
||
<li>许嵩1</li>
|
||
<li>许嵩2</li>
|
||
<li>许嵩3</li>
|
||
<li>许嵩4</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20170801_2137.png" alt="" />
|
||
上图中，我们发现：第二组中的第 1 个 li，去贴靠第一组中的最后一个 li 了（我们本以为这些 li 会分成两排）。
|
||
这便引出我们要讲的：清除浮动的第一种方式。 那该怎么解决呢？</p>
|
||
<h3 id="方法-1给浮动元素的祖先元素加高度"><a class="header" href="#方法-1给浮动元素的祖先元素加高度">方法 1：给浮动元素的祖先元素加高度</a></h3>
|
||
<p>造成前言中这个现象的根本原因是：li 的<strong>父亲 div 没有设置高度</strong>，导致这两个 div 的高度均为 0px（我们可以通过网页的审查元素进行查看）。div
|
||
的高度为零，导致不能给自己浮动的孩子，撑起一个容器。
|
||
撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。
|
||
好，现在就算给这个 div 设置高度，可如果 div 自己的高度小于孩子的高度，也会出现不正常的现象：
|
||
<img src="../../img_list/20170801_2152.png" alt="" />
|
||
给 div 设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：
|
||
<img src="../../img_list/20170801_2153.png" alt="" />
|
||
<strong>总结：</strong>
|
||
<strong>如果一个元素要浮动，那么它的祖先元素一定要有高度。</strong>
|
||
<strong>有高度的盒子，才能关住浮动</strong>。（记住这句过来人的经验之语）
|
||
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
|
||
<img src="../../img_list/20170801_2200.png" alt="" />
|
||
<img src="../../img_list/20170801_2201.png" alt="" /></p>
|
||
<h3 id="方法-2clearboth"><a class="header" href="#方法-2clearboth">方法 2：clear:both;</a></h3>
|
||
<p>网页制作中，高度 height 其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法 1，工作中用得很少。
|
||
那么，能不能不写 height，也把浮动清除了呢？也让浮动之间，互不影响呢？
|
||
这个时候，我们可以使用<code>clear:both;</code>这个属性。如下：
|
||
<img src="../../img_list/20170801_2233.png" alt="" /></p>
|
||
<pre><code>clear:both;
|
||
</code></pre>
|
||
<p>clear 就是清除，both 指的是左浮动、右浮动都要清除。<code>clear:both</code>的意思就是：<strong>不允许左侧和右侧有浮动对象。</strong>
|
||
这种方法有一个非常大的、致命的问题，<strong>它所在的标签，margin 属性失效了</strong>。读者可以试试看。
|
||
margin 失效的本质原因是：上图中的 box1 和 box2，高度为零。</p>
|
||
<h3 id="方法-3隔墙法"><a class="header" href="#方法-3隔墙法">方法 3：隔墙法</a></h3>
|
||
<p>上面这个例子中，为了防止第二个 div 贴靠到第二个 div，我们可以在这两个 div 中间用一个新的 div 隔开，然后给这个新的 div
|
||
设置<code>clear: both;</code>属性；同时，既然这个新的 div 无法设置 margin 属性，我们可以给它设置 height，以达到 margin
|
||
的效果（曲线救国）。这便是隔墙法。
|
||
我们看看例子效果就知道了：
|
||
<img src="../../img_list/20170802_1109.png" alt="" />
|
||
上图这个例子就是隔墙法。
|
||
<strong>内墙法：</strong>
|
||
近些年，有演化出了“内墙法”：
|
||
<img src="../../img_list/20170802_1123.png" alt="" />
|
||
上面这个图非常重要，当作内墙法的公式，先记下来。
|
||
为了讲内墙法，我们先记住一句重要的话：<strong>一个父亲是不能被浮动的儿子撑出高度的</strong>。举例如下：
|
||
（1）我们在一个 div 里放一个有宽高的 p，效果如下：（很简单）
|
||
<img src="../../img_list/20170802_1716.png" alt="" />
|
||
（2）可如果在此基础之上，给 p 设置浮动，却发现父亲 div 没有高度了：
|
||
<img src="../../img_list/20170802_1730.png" alt="" />
|
||
（3）此时，我么可以在 div 的里面放一个 div（作为内墙），就可以让父亲 div 恢复高度：
|
||
<img src="../../img_list/20170802_1812.png" alt="" />
|
||
于是，我们采用内墙法解决前言中的问题：
|
||
<img src="../../img_list/20170802_1834.png" alt="" />
|
||
与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让 box1 有高）。即：box1 的高度可以自适应内容。
|
||
而外墙法，虽然一道墙可以把两个 div 隔开，但是这两个 div 没有高，也就是说，无法 wrap_content。</p>
|
||
<h3 id="清除浮动方法-4overflowhidden"><a class="header" href="#清除浮动方法-4overflowhidden">清除浮动方法 4：overflow:hidden;</a></h3>
|
||
<p>我们可以使用如下属性：</p>
|
||
<pre><code>overflow:hidden;
|
||
</code></pre>
|
||
<p>overflow 即“溢出”， hidden 即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：
|
||
<img src="../../img_list/20170804_1449.png" alt="" />
|
||
上图显示，<code>overflow:hidden;</code>的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：
|
||
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上<code>overflow:hidden</code>; 那么，父亲就能被儿子撑出高了。这是一个偏方。
|
||
举个例子：
|
||
<img src="../../img_list/20170804_1920.png" alt="" />
|
||
那么对于前言中的例子，我们同样可以使用这一属性：
|
||
<img src="../../img_list/20170804_1934.png" alt="" /></p>
|
||
<h2 id="浮动清除的总结"><a class="header" href="#浮动清除的总结">浮动清除的总结</a></h2>
|
||
<blockquote>
|
||
<p>我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。
|
||
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。</p>
|
||
</blockquote>
|
||
<h3 id="1加高法"><a class="header" href="#1加高法">1、加高法</a></h3>
|
||
<p>工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。</p>
|
||
<pre><code class="language-html"><div>
|
||
//设置height
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
<div>
|
||
//设置height
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</code></pre>
|
||
<h3 id="2clearboth法"><a class="header" href="#2clearboth法">2、<code>clear:both;</code>法</a></h3>
|
||
<p>最简单的清除浮动的方法，就是给盒子增加 clear:both；表示自己的内部元素，不受其他盒子的影响。</p>
|
||
<pre><code class="language-html"><div>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
<div>
|
||
//clear:both;
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</code></pre>
|
||
<p>浮动确实被清除了，不会互相影响了。但是有一个问题，就是 margin 失效。两个 div 之间，没有任何的间隙了。</p>
|
||
<h3 id="3隔墙法"><a class="header" href="#3隔墙法">3、隔墙法</a></h3>
|
||
<p>在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。</p>
|
||
<pre><code class="language-html"><div>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
<div class="cl h10"></div>
|
||
<div>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</code></pre>
|
||
<p>我们发现，隔墙法好用，但是第一个 div，还是没有高度。如果我们现在想让第一个 div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
|
||
内墙法：</p>
|
||
<pre><code class="language-html"><div>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
<div class="cl h10"></div>
|
||
</div>
|
||
<div>
|
||
<p></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</code></pre>
|
||
<p>内墙法的优点就是，不仅仅能够让后部分的 p 不去追前部分的 p 了，并且能把第一个 div 撑出高度。这样，这个 div 的背景、边框就能够根据 p
|
||
的高度来撑开了。</p>
|
||
<h3 id="4overflowhidden"><a class="header" href="#4overflowhidden">4、<code>overflow:hidden;</code></a></h3>
|
||
<p>这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
|
||
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了
|
||
overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 并且,overflow:hidden;能够让
|
||
margin 生效。
|
||
<strong>清除浮动的例子：</strong>
|
||
我们现在举个例子，要求实现下图中无序列表部分的效果：
|
||
<img src="../../img_list/20170804_2321.png" alt="" />
|
||
对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul 中不能插入 div 标签，因为 ul 中只能插入 li，如果插入 li
|
||
的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁：
|
||
<img src="../../img_list/20170805_1615.png" alt="" />
|
||
上方代码中，如果没有加<code>overflow:hidden;</code>，那么第二行的 li 会紧跟着第一行 li 的后面。</p>
|
||
<h2 id="浏览器的兼容性问题-1"><a class="header" href="#浏览器的兼容性问题-1">浏览器的兼容性问题</a></h2>
|
||
<blockquote>
|
||
<p>讲一下上述知识点涉及到的浏览器兼容问题。</p>
|
||
</blockquote>
|
||
<h3 id="兼容性-1微型盒子"><a class="header" href="#兼容性-1微型盒子">兼容性 1（微型盒子）</a></h3>
|
||
<p><strong>兼容性的第一条</strong>：IE6 不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大。即：IE 6 不支持微型盒子。
|
||
举个例子。我们设置一个 height 为 5px 、宽度为 200px 的盒子，看下在 IE 8 和 IE 6 中的显示效果：
|
||
<img src="../../img_list/20170805_1726.png" alt="" />
|
||
解决办法很简单，就是将盒子的字号大小，设置为<strong>小于盒子的高</strong>，比如，如果盒子的高为 5px，那就把 font-size 设置为 0px(0px <
|
||
5px)。如下：</p>
|
||
<pre><code>height: 5px;
|
||
_font-size: 0px;
|
||
</code></pre>
|
||
<p>我们现在介绍一下浏览器 hack。hack 就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
|
||
IE6 留了一个<strong>后门</strong>：只要给 css 属性之前，加上<strong>下划线</strong>，这个属性就是 IE6 的专有属性。
|
||
比如说，我们给背景颜色这个属性加上下划线，就变成了<code>_background-color: green;</code>。效果如下：
|
||
<img src="../../img_list/20170805_2026.png" alt="" />
|
||
于是乎，为了解决微型盒子（即 height 小于 12px）的问题，正确写法：（注意不要忘记下划线）</p>
|
||
<pre><code>height: 10px;
|
||
_font-size:0;
|
||
</code></pre>
|
||
<h3 id="兼容性-2"><a class="header" href="#兼容性-2">兼容性 2</a></h3>
|
||
<p>**兼容性的第二条：**IE6 不支持用<code>overflow:hidden;</code>来清除浮动。
|
||
解决办法，以毒攻毒。追加一条：</p>
|
||
<pre><code>_zoom:1;
|
||
</code></pre>
|
||
<p>完整写法：</p>
|
||
<pre><code>overflow: hidden;
|
||
_zoom:1;
|
||
</code></pre>
|
||
<p>实际上，<code>_zoom:1;</code>能够触发浏览器 hasLayout 机制。这个机制，不要深究了，因为只有 IE6 有。我们只需要让 IE6
|
||
好用，具体的实现机制，可以自行查阅。
|
||
需要强调的是，<code>overflow:hidden;</code>的本意，就是让溢出盒子的 border 的内容隐藏，这个功能是 IE6
|
||
兼容的。不兼容的是<code>overflow:hidden;</code>清除浮动的时候。
|
||
<strong>总结：</strong>
|
||
我们刚才学习的两个 IE6 的兼容问题，都是通过多写一条 hack 来解决的，这个我们称为伴生属性，即两个属性，要写一起写。
|
||
属性 1：</p>
|
||
<pre><code>height:6px;
|
||
_font-size:0;
|
||
</code></pre>
|
||
<p>属性 2：</p>
|
||
<pre><code>overflow:hidden;
|
||
_zoom:1;
|
||
</code></pre>
|
||
<h2 id="margin-相关"><a class="header" href="#margin-相关">margin 相关</a></h2>
|
||
<blockquote>
|
||
<p>我们来讲一下浮动中和 margin 相关的知识。</p>
|
||
</blockquote>
|
||
<h3 id="margin-塌陷margin-重叠"><a class="header" href="#margin-塌陷margin-重叠">margin 塌陷/margin 重叠</a></h3>
|
||
<p><strong>标准文档流中，竖直方向的 margin 不叠加，取</strong>较大的值**作为 margin(水平方向的 margin
|
||
是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
|
||
<img src="../../img_list/20170805_0904.png" alt="" />
|
||
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。</p>
|
||
<h3 id="盒子居中margin0-auto"><a class="header" href="#盒子居中margin0-auto">盒子居中<code>margin:0 auto;</code></a></h3>
|
||
<p>margin 的值可以为 auto，表示自动。当 left、right 两个方向都是 auto 的时候，盒子居中了：</p>
|
||
<pre><code>margin-left: auto;
|
||
margin-right: auto;
|
||
</code></pre>
|
||
<p>盒子居中的简写为：</p>
|
||
<pre><code>margin:0 auto;
|
||
</code></pre>
|
||
<p>对上方代码的理解：上下的 margin 为 0，左右的 margin 都尽可能的大，于是就居中了。
|
||
注意：</p>
|
||
<ul>
|
||
<li>（1）只有标准流的盒子，才能使用<code>margin:0 auto;</code>居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用 margin:0
|
||
auto;</li>
|
||
<li>（2）使用<code>margin:0 auto;</code>的盒子，必须有 width，有明确的 width。（可以这样理解，如果没有明确的 witdh，那么它的 witdh
|
||
就是霸占整行，没有意义）</li>
|
||
<li>（3）<code>margin:0 auto;</code>是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用<code>text-align:center;</code>
|
||
对上面的第三条总结一下：（非常重要）</li>
|
||
</ul>
|
||
<pre><code>margin:0 auto; //让这个div自己在大容器中的水平方向上居中。
|
||
text-align: center; //让这个div内部的文本居中。
|
||
</code></pre>
|
||
<p>顺便普及一下知识，text-align 还有：</p>
|
||
<pre><code>text-align:left; //没啥用，因为默认居左
|
||
text-align:right; //文本居右
|
||
</code></pre>
|
||
<h3 id="善于使用父亲的-padding而不是儿子的-margin"><a class="header" href="#善于使用父亲的-padding而不是儿子的-margin">善于使用父亲的 padding，而不是儿子的 margin</a></h3>
|
||
<p>我们来看一个奇怪的现象。现在有下面这样一个结构：（div 中放一个 p）</p>
|
||
<pre><code><div>
|
||
<p></p>
|
||
</div>
|
||
</code></pre>
|
||
<p>上面的结构中，我们尝试通过给儿子<code>p</code>一个<code>margin-top:50px;</code>的属性，让其与父亲保持 50px 的上边距。结果却看到了下面的奇怪的现象：
|
||
<img src="../../img_list/20170806_1537.png" alt="" />
|
||
此时我们给父亲 div 加一个 border 属性，就正常了：
|
||
<img src="../../img_list/20170806_1544.png" alt="" />
|
||
如果父亲没有 border，那么儿子的 margin 实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
|
||
<strong>margin 这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个 marign 表达父子之间的距离。</strong>
|
||
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的 padding，而不是儿子的 margin。</p>
|
||
<h2 id="关于-margin-的-ie6-兼容问题"><a class="header" href="#关于-margin-的-ie6-兼容问题">关于 margin 的 IE6 兼容问题</a></h2>
|
||
<h3 id="ie6-的双倍-margin-的-bug"><a class="header" href="#ie6-的双倍-margin-的-bug">IE6 的双倍 margin 的 bug：</a></h3>
|
||
<p>当出现连续浮动的元素，携带与浮动方向相同的 margin 时，队首的元素，会双倍 marign。</p>
|
||
<pre><code><ul>
|
||
<li></li>
|
||
<li></li>
|
||
<li></li>
|
||
</ul>
|
||
</code></pre>
|
||
<p><img src="../../img_list/20170806_1558.png" alt="" />
|
||
解决方案：
|
||
（1）使浮动的方向和 margin 的方向，相反。
|
||
所以，你就会发现，我们特别喜欢，浮动的方向和 margin 的方向相反。并且，前端开发工程师，把这个当做习惯了。</p>
|
||
<pre><code>float: left;
|
||
margin-right: 40px;
|
||
</code></pre>
|
||
<p>（2）使用 hack：（没必要，别惯着这个 IE6）
|
||
单独给队首的元素，写一个一半的 margin：</p>
|
||
<pre><code><li class="no1"></li>
|
||
</code></pre>
|
||
<pre><code>ul li.no1{
|
||
_margin-left:20px;
|
||
}
|
||
</code></pre>
|
||
<p>PS：双倍 margin 的问题，面试经常问哦。</p>
|
||
<h3 id="ie6-的-3px-bug"><a class="header" href="#ie6-的-3px-bug">IE6 的 3px bug</a></h3>
|
||
<p><img src="../../img_list/20170806_1616.png" alt="" />
|
||
解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用 padding，而不是 margin）。所以，如果你出现了 3px
|
||
bug，说明你的代码不标准。
|
||
IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲 IE6 的兼容性问题，就是为了增加面试的成功率，不是为了成为 IE6 的专家。</p>
|
||
<h2 id="fireworks-和-others"><a class="header" href="#fireworks-和-others">Fireworks 和 others</a></h2>
|
||
<h3 id="fireworks"><a class="header" href="#fireworks">Fireworks</a></h3>
|
||
<p>fireworks 是 Adobe 公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks 的默认文件格式是 png。
|
||
标尺的快捷键：Ctrl + Alt+ R</p>
|
||
<h3 id="others"><a class="header" href="#others">others</a></h3>
|
||
<p>首行缩进两个汉字：</p>
|
||
<pre><code>text-indent: 2em;
|
||
</code></pre>
|
||
<p>上方属性中，单位比较奇怪，叫做 em，em 就是汉字的一个宽度。indent 的意思是缩进。</p>
|
||
<blockquote>
|
||
<p>本文最初发表于<a href="http://www.cnblogs.com/smyhvae/p/8296748.html">博客园</a>，并在<a href="https://github.com/qianguyihao/Web">GitHub</a>上持续更新<strong>前端的系列文章</strong>。欢迎在
|
||
GitHub 上关注我，一起入门和进阶前端。
|
||
以下是正文。
|
||
CSS 的定位属性有三种，分别是绝对定位、相对定位、固定定位。</p>
|
||
</blockquote>
|
||
<pre><code>position: absolute; <!-- 绝对定位 -->
|
||
position: relative; <!-- 相对定位 -->
|
||
position: fixed; <!-- 固定定位 -->
|
||
</code></pre>
|
||
<p>下面逐一介绍。</p>
|
||
<h2 id="相对定位"><a class="header" href="#相对定位">相对定位</a></h2>
|
||
<p><strong>相对定位</strong>：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
|
||
我们之前学习的背景属性中，是通过如下格式：</p>
|
||
<pre><code>background-position:向右偏移量 向下偏移量;
|
||
</code></pre>
|
||
<p>但这回的定位属性，是通过如下格式：</p>
|
||
<pre><code>position: relative;
|
||
left: 50px;
|
||
top: 50px;
|
||
</code></pre>
|
||
<p>相对定位的举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="Generator" content="EditPlus®" />
|
||
<meta name="Author" content="" />
|
||
<meta name="Keywords" content="" />
|
||
<meta name="Description" content="" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
body {
|
||
margin: 0px;
|
||
}
|
||
.div1 {
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 1px solid red;
|
||
}
|
||
.div2 {
|
||
position: relative; /*相对定位：相对于自己原来的位置*/
|
||
left: 50px; /*横坐标：正值表示向右偏移，负值表示向左偏移*/
|
||
top: 50px; /*纵坐标：正值表示向下偏移，负值表示向上偏移*/
|
||
width: 200px;
|
||
height: 200px;
|
||
border: 1px solid red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="div1">有生之年</div>
|
||
<div class="div2">狭路相逢</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果：
|
||
<img src="../../img_list/20151003css28.png" alt="" /></p>
|
||
<h3 id="相对定位不脱标"><a class="header" href="#相对定位不脱标">相对定位不脱标</a></h3>
|
||
<p><strong>相对定位</strong>：不脱标，老家留坑，<strong>别人不会把它的位置挤走</strong>。
|
||
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。</p>
|
||
<h3 id="相对定位的用途"><a class="header" href="#相对定位的用途">相对定位的用途</a></h3>
|
||
<p>如果想做“压盖”效果（把一个 div 放到另一个 div 之上），我们一般<strong>不用</strong>相对定位来做。相对定位，就两个作用：</p>
|
||
<ul>
|
||
<li>（1）微调元素</li>
|
||
<li>（2）做绝对定位的参考，子绝父相</li>
|
||
</ul>
|
||
<h3 id="相对定位的定位值"><a class="header" href="#相对定位的定位值">相对定位的定位值</a></h3>
|
||
<ul>
|
||
<li>left：盒子右移</li>
|
||
<li>right：盒子左移</li>
|
||
<li>top：盒子下移</li>
|
||
<li>bottom：盒子上移
|
||
PS：负数表示相反的方向。
|
||
↘：</li>
|
||
</ul>
|
||
<pre><code>position: relative;
|
||
left: 40px;
|
||
top: 10px;
|
||
</code></pre>
|
||
<p>↙：</p>
|
||
<pre><code>position: relative;
|
||
right: 100px;
|
||
top: 100px;
|
||
</code></pre>
|
||
<p>↖：</p>
|
||
<pre><code>position: relative;
|
||
right: 100px;
|
||
bottom: 100px;
|
||
</code></pre>
|
||
<p>↗：</p>
|
||
<pre><code>position: relative;
|
||
left: 200px;
|
||
bottom: 200px;
|
||
</code></pre>
|
||
<p><img src="../../img_list/20180115_1716.png" alt="" />
|
||
如果要描述上面这张图的方向，我们可以首先可以这样描述：</p>
|
||
<pre><code>position: relative;
|
||
left: 200px;
|
||
top: 100px;
|
||
</code></pre>
|
||
<p>因为<code>left: 200px</code>等价于<code>right: -200px</code>，所以这张图其实有四种写法。</p>
|
||
<h2 id="绝对定位"><a class="header" href="#绝对定位">绝对定位</a></h2>
|
||
<p><strong>绝对定位</strong>：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用 left 表示，纵坐标用 top 或者 bottom 表示。
|
||
格式举例如下：</p>
|
||
<pre><code>position: absolute; /*绝对定位*/
|
||
left: 10px; /*横坐标*/
|
||
top/bottom: 20px; /*纵坐标*/
|
||
</code></pre>
|
||
<h3 id="绝对定位脱标"><a class="header" href="#绝对定位脱标">绝对定位脱标</a></h3>
|
||
<p><strong>绝对定位的盒子脱离了标准文档流。</strong>
|
||
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
|
||
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要<code>display:block</code>就可以设置宽、高了。</p>
|
||
<h3 id="绝对定位的参考点重要"><a class="header" href="#绝对定位的参考点重要">绝对定位的参考点（重要）</a></h3>
|
||
<p>（1）如果用<strong>top 描述</strong>，那么参考点就是<strong>页面的左上角</strong>，而不是浏览器的左上角：
|
||
<img src="../../img_list/20180115_2120.png" alt="" />
|
||
（2）如果用<strong>bottom 描述</strong>，那么参考点就是<strong>浏览器首屏窗口尺寸</strong>（好好理解“首屏”二字），对应的页面的左下角：
|
||
<img src="../../img_list/20180115_2121.png" alt="" />
|
||
为了理解“<strong>首屏</strong>”二字的含义，我们来看一下动态图：
|
||
<img src="../../img_list/20180115_2200.gif" alt="" />
|
||
问题：
|
||
<img src="../../img_list/20180115_2131.png" alt="" />
|
||
答案：
|
||
用 bottom 的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
|
||
<img src="../../img_list/20180115_2132.png" alt="" /></p>
|
||
<h3 id="以盒子为参考点"><a class="header" href="#以盒子为参考点">以盒子为参考点</a></h3>
|
||
<p>一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
|
||
如下：（子绝父相）
|
||
<img src="../../img_list/20180115_2210.png" alt="" />
|
||
以下几点需要注意。
|
||
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：</p>
|
||
<pre><code><div class="box1"> 相对定位
|
||
<div class="box2"> 没有定位
|
||
<p></p> 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<p>再比如：</p>
|
||
<pre><code><div class="box1"> 相对定位
|
||
<div class="box2"> 相对定位
|
||
<p></p> 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
<p>（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
|
||
子绝父绝、<strong>子绝父相</strong>、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
|
||
<strong>工程应用：</strong>
|
||
“<strong>子绝父相</strong>”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：</p>
|
||
<blockquote>
|
||
<p>父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
|
||
（3）绝对定位的儿子，无视参考的那个盒子的 padding：
|
||
下图中，绿色部分是父亲 div 的 padding，蓝色部分 p 是 div 的内容区域。此时，如果 div 相对定位，p 绝对定位，那么， p 将无视父亲的
|
||
padding，在 border 内侧为参考点，进行定位：
|
||
<img src="../../img_list/20180116_0812.png" alt="" />
|
||
<strong>工程应用：</strong>
|
||
绝对定位非常适合用来做“压盖”效果。我们来举个 lagou.com 上的例子。
|
||
现在有如下两张图片素材：
|
||
<img src="../../img_list/20180116_1115.png" alt="" />
|
||
<img src="../../img_list/20180116_1116.jpg" alt="" />
|
||
要求作出如下效果：
|
||
<img src="../../img_list/20180116_1117.png" alt="" />
|
||
代码实现如下：</p>
|
||
</blockquote>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
.box {
|
||
margin: 100px;
|
||
width: 308px;
|
||
height: 307px;
|
||
border: 1px solid #ff7e00;
|
||
position: relative; /*子绝父相*/
|
||
}
|
||
.box .image img {
|
||
width: 308px;
|
||
height: 196px;
|
||
}
|
||
.box .dtc {
|
||
display: block; /*转为块级元素，才能设置span的宽高*/
|
||
width: 52px;
|
||
height: 28px;
|
||
background-image: url(../../img_list/20180116_1115.png);
|
||
background-position: -108px 0px; /*这里用到了精灵图*/
|
||
position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/
|
||
top: -9px;
|
||
left: 13px;
|
||
}
|
||
.box h4 {
|
||
background-color: black;
|
||
color: white;
|
||
width: 308px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
position: absolute;
|
||
top: 156px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="box">
|
||
<span class="dtc"></span>
|
||
<div class="image">
|
||
<img src="../../img_list/20180116_1116.jpg" alt="" />
|
||
</div>
|
||
<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h4>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>代码解释如下：</p>
|
||
<ul>
|
||
<li>为了显示“多套餐”那个小图，我们需要用到精灵图。</li>
|
||
<li>“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报 image 的上方的。
|
||
代码的效果如下：
|
||
<img src="../../img_list/20180116_1335.png" alt="" /></li>
|
||
</ul>
|
||
<h3 id="让绝对定位中的盒子在父亲里居中"><a class="header" href="#让绝对定位中的盒子在父亲里居中">让绝对定位中的盒子在父亲里居中</a></h3>
|
||
<p>我们知道，如果想让一个<strong>标准流中的盒子在父亲里居中</strong>（水平方向看），可以将其设置<code>margin: 0 auto</code>属性。
|
||
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：</p>
|
||
<pre><code>div {
|
||
width: 600px;
|
||
height: 60px;
|
||
position: absolute; 绝对定位的盒子
|
||
left: 50%; 首先，让左边线居中
|
||
top: 0;
|
||
margin-left: -300px; 然后，向左移动宽度（600px）的一半
|
||
}
|
||
</code></pre>
|
||
<p>如上方代码所示，我们先让这个宽度为 600px 的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
|
||
<img src="../../img_list/20180116_1356.png" alt="" />
|
||
我们可以总结成一个公式：</p>
|
||
<blockquote>
|
||
<p>left:50%; margin-left:负的宽度的一半</p>
|
||
</blockquote>
|
||
<h2 id="固定定位"><a class="header" href="#固定定位">固定定位</a></h2>
|
||
<p><strong>固定定位</strong>：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
|
||
备注：IE6 不兼容。
|
||
<strong>用途 1</strong>：网页右下角的“返回到顶部”
|
||
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。</p>
|
||
<pre><code class="language-html"><style type="text/css">
|
||
.backtop {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
right: 30px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background-color: gray;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: white;
|
||
text-decoration: none; /*去掉超链接的下划线*/
|
||
}
|
||
</style>
|
||
</code></pre>
|
||
<p>**用途 2：**顶部导航条
|
||
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
|
||
需要注意的是，假设顶部导航条的高度是 60px，那么，为了防止其他的内容被导航条覆盖，我们要给 body 标签设置 60px 的 padding-top。
|
||
顶部导航条的实现如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
/*为什么要写这个？*/
|
||
/*不希望我们的页面被nav挡住*/
|
||
padding-top: 60px;
|
||
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
|
||
_padding-top: 0;
|
||
}
|
||
.nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 60px;
|
||
background-color: #333;
|
||
z-index: 99999999;
|
||
}
|
||
.inner_c {
|
||
width: 1000px;
|
||
height: 60px;
|
||
margin: 0 auto;
|
||
}
|
||
.inner_c ul {
|
||
list-style: none;
|
||
}
|
||
.inner_c ul li {
|
||
float: left;
|
||
width: 100px;
|
||
height: 60px;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
}
|
||
.inner_c ul li a {
|
||
display: block;
|
||
width: 100px;
|
||
height: 60px;
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
.inner_c ul li a:hover {
|
||
background-color: gold;
|
||
}
|
||
p {
|
||
font-size: 30px;
|
||
}
|
||
.btn {
|
||
display: block;
|
||
width: 120px;
|
||
height: 30px;
|
||
background-color: orange;
|
||
position: relative;
|
||
top: 2px;
|
||
left: 1px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="nav">
|
||
<div class="inner_c">
|
||
<ul>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
<li><a href="#">网页栏目</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<h3 id="5z-index-属性"><a class="header" href="#5z-index-属性">5、z-index 属性：</a></h3>
|
||
<p><strong>z-index</strong>属性：表示谁压着谁。数值大的压盖住数值小的。
|
||
有如下特性：
|
||
（1）属性值大的位于上层，属性值小的位于下层。
|
||
（2）z-index 值没有单位，就是一个正整数。默认的 z-index 值是 0。
|
||
（3）如果大家都没有 z-index 值，或者 z-index 值一样，那么在 HTML
|
||
代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
|
||
（4）只有定位了的元素，才能有 z-index 值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。<strong>而浮动的元素不能用</strong>。
|
||
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲 1 比父亲 2 大，那么，即使儿子 1 比儿子 2 小，儿子 1 也能在最上层。
|
||
针对（1）（2）（3）条，举例如下：
|
||
这是默认情况下的例子：（div2 在上层，div1 在下层）
|
||
<img src="../../img_list/20151003css32.png" alt="" />
|
||
现在加一个<code>z-index</code>属性，要求效果如下：
|
||
<img src="../../img_list/20151003css33.png" alt="" />
|
||
第五条分析：
|
||
<img src="../../img_list/20180116_1445.png" alt="" />
|
||
z-index 属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个 z-index 属性决定，谁处于最上方。也就是<strong>层级</strong>的应用。
|
||
<strong>层级：</strong>
|
||
（1）必须有定位（除去 static）
|
||
（2）用<code>z-index</code>来控制层级数。</p>
|
||
<h2 id="前言-3"><a class="header" href="#前言-3">前言</a></h2>
|
||
<blockquote>
|
||
<p>CSS 已经学了一些基础内容了，我们来讲解一个小案例吧。以<a href="http://www.boyaa.com/">博雅互动</a>的官网首页举例。</p>
|
||
</blockquote>
|
||
<h3 id="版心"><a class="header" href="#版心">版心</a></h3>
|
||
<p>首页的<strong>版心</strong>如下：
|
||
<img src="../../img_list/20170813_1535.png" alt="" />
|
||
这里我们要普及一个概念，叫“<a href="https://baike.baidu.com/item/%E7%89%88%E5%BF%83">版心</a>”。<strong>版心是页面中主要内容所在的区域。</strong>
|
||
比如说，网站左上角的 logo，设计图给出的左边距是 143 像素，此时，我们千万不要以为，logo 的左边距真的是 143
|
||
像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
|
||
我们量一下中间四个方形图的 width，是 1000px，所以，网页版心的宽度是 1000px。</p>
|
||
<h3 id="网页的结构"><a class="header" href="#网页的结构">网页的结构</a></h3>
|
||
<p>从结构上来看，网页分为头部（导航栏）、banner 区、内容区、底部。</p>
|
||
<h2 id="导航栏的制作"><a class="header" href="#导航栏的制作">导航栏的制作</a></h2>
|
||
<p>在此我们只讲基础知识的使用，不涉及浏览器的优化。
|
||
<code>class==header</code>这个 div 是顶部的通栏，我们在里面放一个 1000px 宽的
|
||
div，作为通栏的版心，我一般把这个版心称为<code>class=inner_c</code>，c 指的是 center。
|
||
<code>class=inner_c</code>不需要给高，因为它可以被内容撑高。
|
||
现在我们需要在<code>class=inner_c</code>里放三个东西：左侧的 logo、中间的导航栏、右侧的“加入我们”。
|
||
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用 CSS3 实现（IE 7、IE 8
|
||
不兼容）。我们暂时使用切图来实现。
|
||
我们最好把「加入我们」这个超链接<code><a></code>放到<code>div</code>里，然后设置 div 的 margin 和 padding，而不是直接设置<code><a></code>的边距。
|
||
我们起个名字叫<code>class=jrwm</code>是没有问题的，这在工作当中很常见，如果写成<code>class=join_us</code>反倒很别扭。
|
||
暂时我们的做法是：</p>
|
||
<ul>
|
||
<li>（1）给<code>class=jrwm_box</code>这个 div 里放一个<code>class=jrwm</code>的 div。<code>class=jrwm</code>用来放绿色的背景图片。</li>
|
||
<li>（2）在<code>class=jrwm</code>里放一个超链接，并将超链接转为块级元素。
|
||
最终，导航栏的代码如下：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
body {
|
||
font-size: 14px;
|
||
font-family: "Microsoft YaHei", "SimSun";
|
||
height: 8888px;
|
||
}
|
||
.header {
|
||
height: 58px;
|
||
background-color: #191d3a;
|
||
}
|
||
/*版心*/
|
||
.inner_c {
|
||
width: 1000px;
|
||
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
|
||
}
|
||
/*导航条的logo*/
|
||
.header .logo {
|
||
float: left;
|
||
margin-right: 40px;
|
||
}
|
||
.header .nav {
|
||
float: left;
|
||
}
|
||
.header .nav ul {
|
||
list-style: none; /*去掉列表前面的圆点*/
|
||
}
|
||
.header .nav ul li {
|
||
float: left;
|
||
width: 100px;
|
||
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
|
||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||
}
|
||
.header .nav ul li.last {
|
||
border-right: 1px solid #252947; /*最后一个li的右边加间隔线*/
|
||
}
|
||
.header .nav ul li a {
|
||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||
height: 58px;
|
||
text-decoration: none; /*去掉超链的下划线*/
|
||
color: #818496;
|
||
text-align: center; /*让这个div内部的文本居中*/
|
||
}
|
||
.header .nav ul li a.current {
|
||
color: white;
|
||
background: #252947;
|
||
}
|
||
.header .nav ul li a:hover {
|
||
color: white;
|
||
background: #252947;
|
||
}
|
||
.header .jrwm_box {
|
||
float: left;
|
||
height: 58px;
|
||
width: 100px;
|
||
padding-left: 48px;
|
||
padding-top: 12px;
|
||
}
|
||
/*放背景图片的div*/
|
||
.header .jrwm_box .jrwm {
|
||
height: 34px;
|
||
background-image: url(images/jrwm.png);
|
||
background-repeat: no-repeat;
|
||
text-align: center; /*让这个div内部的超链接居中*/
|
||
}
|
||
.header .jrwm_box .jrwm a {
|
||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
|
||
text-decoration: none; /*去掉超链的下划线*/
|
||
color: white;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="inner_c">
|
||
<div class="logo">
|
||
<img src="images/logo.png " alt="" />
|
||
</div>
|
||
<div class="nav">
|
||
<ul>
|
||
<li><a href="#" class="current">首页</a></li>
|
||
<li><a href="#">博雅游戏</a></li>
|
||
<li><a href="#">博雅新闻</a></li>
|
||
<li><a href="#">关于我们</a></li>
|
||
<li><a href="#">客服中心</a></li>
|
||
<li class="last"><a href="#">投资者关系</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="jrwm_box">
|
||
<div class="jrwm">
|
||
<a href="https://www.google.com/" target="_blank">加入我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>导航栏的效果如下：
|
||
<img src="../../img_list/20180114_1332.gif" alt="" /></p>
|
||
<h2 id="banenr-图"><a class="header" href="#banenr-图">banenr 图</a></h2>
|
||
<blockquote>
|
||
<p>因为涉及到 js 的内容，这里先不讲内容区域<strong>轮播图</strong>的效果。
|
||
我们首先在导航条和 banner 图之间加一道墙，即<code>class=cl</code>，然后采用隔墙法对其设置<code>clear: both;</code>的属性。
|
||
然后设置 banner 的背景图片属性，添加 banner 图。</p>
|
||
</blockquote>
|
||
<h2 id="内容区域的制作"><a class="header" href="#内容区域的制作">内容区域的制作</a></h2>
|
||
<p>导航栏+banner+内容区域的完整代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
/*清除浮动的影响*/
|
||
.cl {
|
||
clear: both;
|
||
}
|
||
body {
|
||
font-size: 14px;
|
||
font-family: "Microsoft YaHei", "SimSun";
|
||
height: 8888px;
|
||
}
|
||
.header {
|
||
height: 58px;
|
||
background-color: #191d3a;
|
||
}
|
||
/*版心*/
|
||
.inner_c {
|
||
width: 1000px;
|
||
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
|
||
}
|
||
/*导航条的logo*/
|
||
.header .logo {
|
||
float: left;
|
||
margin-right: 40px;
|
||
}
|
||
.header .nav {
|
||
float: left;
|
||
}
|
||
.header .nav ul {
|
||
list-style: none; /*去掉列表前面的圆点*/
|
||
}
|
||
.header .nav ul li {
|
||
float: left;
|
||
width: 100px;
|
||
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
|
||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||
}
|
||
.header .nav ul li.last {
|
||
border-right: 1px solid #252947; /*最后一个li的右边加间隔线*/
|
||
}
|
||
.header .nav ul li a {
|
||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||
height: 58px;
|
||
text-decoration: none; /*去掉超链的下划线*/
|
||
color: #818496;
|
||
text-align: center; /*让这个div内部的文本居中*/
|
||
}
|
||
.header .nav ul li a.current {
|
||
color: white;
|
||
background: #252947;
|
||
}
|
||
.header .nav ul li a:hover {
|
||
color: white;
|
||
background: #252947;
|
||
}
|
||
.header .jrwm_box {
|
||
float: left;
|
||
height: 58px;
|
||
width: 100px;
|
||
padding-left: 48px;
|
||
padding-top: 12px;
|
||
}
|
||
/*放背景图片的div*/
|
||
.header .jrwm_box .jrwm {
|
||
height: 34px;
|
||
background-image: url(images/jrwm.png);
|
||
background-repeat: no-repeat;
|
||
text-align: center; /*让这个div内部的超链接居中*/
|
||
}
|
||
.header .jrwm_box .jrwm a {
|
||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
|
||
text-decoration: none; /*去掉超链的下划线*/
|
||
color: white;
|
||
}
|
||
.banner {
|
||
height: 465px;
|
||
background: url(images/banner.jpg) no-repeat center top;
|
||
}
|
||
.content {
|
||
padding-top: 50px;
|
||
}
|
||
.content .product {
|
||
height: 229px;
|
||
border-bottom: 1px solid #dbe1e7;
|
||
}
|
||
.content .product ul {
|
||
list-style: none;
|
||
}
|
||
.content .product ul li {
|
||
float: left;
|
||
width: 218px;
|
||
margin-right: 43px;
|
||
}
|
||
.content .product ul li.last {
|
||
margin-right: 0;
|
||
width: 217px;
|
||
}
|
||
.content .product ul li img {
|
||
width: 218px;
|
||
height: 130px;
|
||
}
|
||
.content .product ul li.last img {
|
||
width: 217px;
|
||
}
|
||
.content .product ul li h3 {
|
||
text-align: center;
|
||
line-height: 38px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
.content .product ul li p.djbf {
|
||
text-align: center;
|
||
line-height: 16px;
|
||
}
|
||
.content .product ul li p.djbf a {
|
||
font-size: 12px;
|
||
color: #38b774;
|
||
text-decoration: none;
|
||
background: url(images/sanjiaoxing.png) no-repeat right 5px;
|
||
padding-right: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="inner_c">
|
||
<div class="logo">
|
||
<img src="images/logo.png " alt="" />
|
||
</div>
|
||
<div class="nav">
|
||
<ul>
|
||
<li><a href="#" class="current">首页</a></li>
|
||
<li><a href="#">博雅游戏</a></li>
|
||
<li><a href="#">博雅新闻</a></li>
|
||
<li><a href="#">关于我们</a></li>
|
||
<li><a href="#">客服中心</a></li>
|
||
<li class="last"><a href="#">投资者关系</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="jrwm_box">
|
||
<div class="jrwm">
|
||
<a href="https://www.google.com/" target="_blank">加入我们</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 在导航条和banner之间隔一堵墙 -->
|
||
<div class="cl"></div>
|
||
<div class="banner"></div>
|
||
<!-- 内容区域 -->
|
||
<div class="content inner_c">
|
||
<div class="product">
|
||
<ul>
|
||
<li>
|
||
<p><img src="images/pro1.jpg" alt="" /></p>
|
||
<h3>BPT宣传片</h3>
|
||
<p class="djbf">
|
||
<a href="#">点击播放</a>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p><img src="images/pro2.jpg" alt="" /></p>
|
||
<h3>BPT宣传片</h3>
|
||
<p class="djbf">
|
||
<a href="#">点击播放</a>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p><img src="images/pro3.jpg" alt="" /></p>
|
||
<h3>BPT宣传片</h3>
|
||
<p class="djbf">
|
||
<a href="#">点击播放</a>
|
||
</p>
|
||
</li>
|
||
<li class="last">
|
||
<p><img src="images/pro4.jpg" alt="" /></p>
|
||
<h3>BPT宣传片</h3>
|
||
<p class="djbf">
|
||
<a href="#">点击播放</a>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>代码解释：
|
||
（1）导航栏，左侧的 logo：
|
||
<strong>错误的写法：</strong>
|
||
可能会有人直接将 img 标签作为 logo 的布局：</p>
|
||
<pre><code class="language-html"><div class="logo">
|
||
<img src="images/logo.png " alt="" />
|
||
</div>
|
||
</code></pre>
|
||
<p>然后将 img 的样式设置为：</p>
|
||
<pre><code class="language-css">.header .logo {
|
||
float: left;
|
||
margin-right: 40px;
|
||
}
|
||
</code></pre>
|
||
<p>这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于 SEO。
|
||
<strong>正确的写法：</strong>
|
||
正确的写法是将超链接作为 logo 的布局，里面放入文字（文字可以被 SEO）：</p>
|
||
<pre><code class="language-html"><h1 class="logo">
|
||
<a href="#"> 博雅互动-世界上最好的游戏公司 </a>
|
||
</h1>
|
||
</code></pre>
|
||
<p>然后将<strong>logo 设置为背景图</strong>：</p>
|
||
<pre><code class="language-css">.header .logo {
|
||
float: left;
|
||
padding-left: 12px;
|
||
margin-right: 39px;
|
||
width: 174px;
|
||
height: 58px;
|
||
}
|
||
.header .logo a {
|
||
display: block;
|
||
width: 174px;
|
||
height: 58px;
|
||
background: url(images/logo.png) no-repeat;
|
||
text-indent: -999em;
|
||
}
|
||
</code></pre>
|
||
<p>由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，<strong>然后通过<code>text-indent</code>缩进的属性把文字赶走到视线以外的地方</strong>。这是做搜索引擎优化的一个重要的技巧。
|
||
另外，背景要放在里层的 a 标签里，不要放在外层的 h1 标签里。假设背景图放在 h1 里，那么不管 h1 的 padding 有多大，背景图的位置都不会变。
|
||
（1）内容区域，“点击播放”右侧的小三角形：
|
||
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
|
||
<img src="../../img_list/20180115_1356.png" alt="" />
|
||
代码截取如下：</p>
|
||
<pre><code class="language-css">.content .product ul li p.djbf a {
|
||
font-size: 12px;
|
||
color: #38b774;
|
||
text-decoration: none;
|
||
background: url(images/sanjiaoxing.png) no-repeat right center;
|
||
padding-right: 12px;
|
||
}
|
||
</code></pre>
|
||
<p>上方代码中，我们在第 6 行给“点击播放”这个超链接加一个右 padding（很关键），然后在第 5 行把小三角这个背景图放在右 padding
|
||
的位置，就能达到想要的视觉效果。
|
||
（2）导航栏+banner+内容区域的效果如下：
|
||
<img src="../../img_list/20180114_1405.png" alt="" />
|
||
工程文件如下：</p>
|
||
<ul>
|
||
<li><a href="https://download.csdn.net/download/smyhvae/11832612">2018-03-20-boya.rar</a></li>
|
||
</ul>
|
||
<h2 id="css3-介绍"><a class="header" href="#css3-介绍">CSS3 介绍</a></h2>
|
||
<p>CSS3 在 CSS2 基础上，<strong>增强</strong>或<strong>新增</strong>了许多特性， 弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。</p>
|
||
<h3 id="css3-的现状"><a class="header" href="#css3-的现状">CSS3 的现状</a></h3>
|
||
<ul>
|
||
<li>浏览器支持程度不够好，有些需要添加<strong>私有前缀</strong></li>
|
||
<li>移动端支持优于 PC 端</li>
|
||
<li>不断改进中</li>
|
||
<li>应用相对广泛</li>
|
||
</ul>
|
||
<h3 id="应对的策略渐进增强"><a class="header" href="#应对的策略渐进增强">应对的策略：渐进增强</a></h3>
|
||
<ul>
|
||
<li>（1）坚持<strong>渐进增强</strong>的原则：<strong>让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好</strong>。【重要】
|
||
比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。</li>
|
||
<li>（2）考虑用户群体。</li>
|
||
<li>（3）遵照产品的方案。
|
||
参考链接：</li>
|
||
<li><a href="https://www.jianshu.com/p/d313f1108862">渐进增强 VS 优雅降级 | 简书</a></li>
|
||
<li><a href="https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html">渐进增强和优雅降级之间的不同（面试题目）</a></li>
|
||
</ul>
|
||
<h3 id="浏览器的版本问题"><a class="header" href="#浏览器的版本问题">浏览器的版本问题</a></h3>
|
||
<p>由于 CSS3 普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：</p>
|
||
<ul>
|
||
<li>Chrome 浏览器 version 46+</li>
|
||
<li>Firefox 浏览器 firefox 42+</li>
|
||
</ul>
|
||
<h3 id="如何使用手册"><a class="header" href="#如何使用手册">如何使用手册</a></h3>
|
||
<p>CSS 参考手册的网址：<a href="http://css.doyoe.com/">http://css.doyoe.com/</a>
|
||
CSS 参考手册的下载链接：<a href="http://download.csdn.net/download/smyhvae/10243974">http://download.csdn.net/download/smyhvae/10243974</a>
|
||
在查看<a href="http://download.csdn.net/download/smyhvae/10243974">CSS 参考手册</a>时，需要注意以下符号：
|
||
<img src="../../img_list/20180206_2150.png" alt="" />
|
||
比如说，<code>{1,4}</code>表示可以设置一至四个参数。
|
||
下面讲 CSS3 的基础知识。本文讲一下 CSS3 选择器的内容。</p>
|
||
<h2 id="css3-选择器"><a class="header" href="#css3-选择器">CSS3 选择器</a></h2>
|
||
<p>我们之前学过 CSS 的选择器，比如：</p>
|
||
<pre><code>div 标签选择器
|
||
.box 类名选择器
|
||
#box id选择器
|
||
div p 后代选择器
|
||
div.box 交集选择器
|
||
div,p,span 并集选择器
|
||
div>p 子代选择器
|
||
* : 通配符
|
||
div+p: 选中div后面相邻的第一个p
|
||
div~p: 选中的div后面所有的p
|
||
</code></pre>
|
||
<p>CSS3 新增了许多<strong>灵活</strong>查找元素的方法，极大的提高了查找元素的效率和<strong>精准度</strong>。CSS3 选择器与 jQuery
|
||
中所提供的<strong>绝大部分</strong>选择器兼容。</p>
|
||
<h3 id="属性选择器"><a class="header" href="#属性选择器">属性选择器</a></h3>
|
||
<p>属性选择器的标志性符号是 <code>[]</code>。
|
||
匹配含义：</p>
|
||
<pre><code>^：开头 $：结尾 *：包含
|
||
</code></pre>
|
||
<p>格式：</p>
|
||
<ul>
|
||
<li><code>E[title]</code> 选中页面的 E 元素，并且 E 存在 title 属性即可。</li>
|
||
<li><code>E[title="abc"]</code>选中页面的 E 元素，并且 E 需要带有 title 属性，且属性值<strong>完全等于</strong>abc。</li>
|
||
<li><code>E[attr~=val]</code> 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的 E 元素。</li>
|
||
<li><code>E[attr|=val]</code> 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。</li>
|
||
<li><code>E[title^="abc"]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值以 abc 开头。</li>
|
||
<li><code>E[title$="abc"]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值以 abc 结尾。</li>
|
||
<li><code>E[title*="abc"]</code> 选中页面的 E 元素，并且 E 需要带有 title 属性,属性值任意位置包含 abc。
|
||
比如说，我们用属性选择器去匹配标签的 className，是非常方便的。
|
||
这里我们用 class 属性来举例。代码举例：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>选择器 - 属性</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: "微软雅黑";
|
||
background-color: #f7f7f7;
|
||
}
|
||
.wrapper {
|
||
width: 1024px;
|
||
margin: 0 auto;
|
||
}
|
||
.wrapper > section {
|
||
min-height: 300px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 1px 1px 4px #ddd;
|
||
background-color: #fff;
|
||
}
|
||
.wrapper > header {
|
||
text-align: center;
|
||
line-height: 1;
|
||
padding: 20px;
|
||
margin-bottom: 10px;
|
||
font-size: 30px;
|
||
}
|
||
.wrapper section > header {
|
||
line-height: 1;
|
||
padding: 10px;
|
||
font-size: 22px;
|
||
color: #333;
|
||
background-color: #eee;
|
||
}
|
||
.wrapper .wrap-box {
|
||
padding: 20px;
|
||
}
|
||
form {
|
||
width: 300px;
|
||
height: 300px;
|
||
margin: 0 auto;
|
||
}
|
||
form input[type="text"] {
|
||
width: 200px;
|
||
height: 30px;
|
||
}
|
||
form input[type="password"] {
|
||
width: 200px;
|
||
height: 30px;
|
||
}
|
||
.attr1 {
|
||
}
|
||
.download {
|
||
}
|
||
.attr1 a[href="./a.rmvb"] {
|
||
color: red;
|
||
}
|
||
.attr1 a[href="./b.rmvb"] {
|
||
color: pink;
|
||
}
|
||
/* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
|
||
.attr2 a[class~="download"] {
|
||
color: red;
|
||
}
|
||
/* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
|
||
.attr3 a[class|="download"] {
|
||
color: red;
|
||
}
|
||
/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
|
||
.attr4 a[class*="download"] {
|
||
color: red;
|
||
}
|
||
/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
|
||
.attr5 a[class^="download"] {
|
||
color: red;
|
||
}
|
||
/* E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
|
||
.attr6 a[class$="download"] {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrapper">
|
||
<header>CSS3-属性选择器</header>
|
||
<section>
|
||
<header>简介</header>
|
||
<div class="wrap-box">
|
||
<form action="">
|
||
<ul>
|
||
<li>姓名: <input type="text" /></li>
|
||
<li>密码: <input type="password" /></li>
|
||
<li>性别: <input type="radio" />男 <input type="radio" /> 女</li>
|
||
<li>兴趣: <input type="checkbox" name="" id="" />写代码</li>
|
||
<li>
|
||
<input type="submit" value="提交" />
|
||
</li>
|
||
</ul>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
<section class="attr1">
|
||
<header>E[attr]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download download-movie">下载</a>
|
||
<a href="./b.rmvb" class="download download-movie">下载</a>
|
||
<a href="./a.mp3" class="download download-music">下载</a>
|
||
</div>
|
||
</section>
|
||
<section class="attr2">
|
||
<header>E[attr~=attr]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download download-movie">下载</a>
|
||
<a href="./b.rmvb" class="download download-movie">下载</a>
|
||
<a href="./a.mp3" class="download download-music">下载</a>
|
||
</div>
|
||
</section>
|
||
<section class="attr3">
|
||
<header>E[attr|=attr]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download">下载</a>
|
||
<a href="./b.rmvb" class="download-movie">下载</a>
|
||
<a href="./a.mp3" class="download-music">下载</a>
|
||
</div>
|
||
</section>
|
||
<section class="attr4">
|
||
<header>E[attr*=val]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download">下载</a>
|
||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||
</div>
|
||
</section>
|
||
<section class="attr5">
|
||
<header>E[attr^=val]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download">下载</a>
|
||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||
</div>
|
||
</section>
|
||
<section class="attr6">
|
||
<header>E[attr$=val]</header>
|
||
<div class="wrap-box">
|
||
<a href="./a.rmvb" class="download">下载</a>
|
||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>最后来张表格：
|
||
<img src="../../img_list/20180207_1500.png" alt="" /></p>
|
||
<h3 id="结构伪类选择器"><a class="header" href="#结构伪类选择器">结构伪类选择器</a></h3>
|
||
<p>伪类选择器的标志性符号是 <code>:</code>。
|
||
CSS 中有一些伪类选择器，比如<code>:link</code>、<code>:active</code>、<code>:visited</code>、<code>:hover</code>，这些是动态伪类选择器。
|
||
CSS3 又新增了其它的伪类选择器。这一小段，我们来学习 CSS3 中的<strong>结构伪类选择器</strong>：即通过<strong>结构</strong>来进行筛选。
|
||
<strong>1、格式：（第一部分）</strong></p>
|
||
<ul>
|
||
<li><code>E:first-child</code> 匹配父元素的第一个子元素 E。</li>
|
||
<li><code>E:last-child</code> 匹配父元素的最后一个子元素 E。</li>
|
||
<li><code>E:nth-child(n)</code> 匹配父元素的第 n 个子元素 E。<strong>注意</strong>，盒子的编号是从<code>1</code>开始算起，不是从<code>0</code>开始算起。</li>
|
||
<li><code>E:nth-child(odd)</code> 匹配奇数</li>
|
||
<li><code>E:nth-child(even)</code> 匹配偶数</li>
|
||
<li><code>E:nth-last-child(n)</code> 匹配父元素的倒数第 n 个子元素 E。
|
||
理解：
|
||
（1）这里我们要好好理解<strong>父元素</strong>的含义，它指的是：以 E 元素的父元素为参考。
|
||
（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型 E，如果选不中，则无效。这个要好好理解，具体可以看 CSS
|
||
参考手册中的<code>E:nth-child(n)</code>的示例。我们可以理解成：<strong>先根据选择器找到选中的全部位置，如果发现某个位置不是类型 E，则该位置失效</strong>。
|
||
（3）另外，<code>E:nth-child(n)</code>这个属性也很有意思。比如，针对下面这样一组标签：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><ul>
|
||
<li>1</li>
|
||
<li>2</li>
|
||
<li>3</li>
|
||
<li>4</li>
|
||
<li>5</li>
|
||
<li>6</li>
|
||
<li>7</li>
|
||
<li>8</li>
|
||
<li>9</li>
|
||
<li>10</li>
|
||
</ul>
|
||
</code></pre>
|
||
<p>上方代码中：</p>
|
||
<ul>
|
||
<li>如果选择器写成<code>li:nth-child(2)</code>，则表示第 2 个 <code>li</code>。</li>
|
||
<li>如果选择器写成<code>li:nth-child(n)</code>，则表示<strong>所有的</strong> <code>li</code>。因为此时的 <code>n</code> 表示 0,1,2,3,4,5,6,7,8…..（当
|
||
n 小于 1 时无效，因为 n = 0 也是不会选中的）</li>
|
||
<li>如果选择器写成<code>li:nth-child(2n)</code>，则表示所有的<strong>第偶数个</strong> li。</li>
|
||
<li>如果选择器写成<code>li:nth-child(2n+1)</code>，则表示所有的<strong>第奇数个</strong> li。</li>
|
||
<li>如果选择器写成<code>li:nth-child(-n+5)</code>，则表示<strong>前 5 个</strong> li。</li>
|
||
<li>如果选择器写成<code>li:nth-last-child(-n+5)</code>，则表示<strong>最后 5 个</strong> li。</li>
|
||
<li>如果选择器写成<code>li:nth-child(7n)</code>，则表示选中 7 的倍数。。
|
||
上面列举的选择器中，我们只要记住： <code>n</code> 表示 0,1,2,3,4,5,6,7,8…..就很容易明白了。
|
||
<strong>2、格式：（第二部分）</strong></li>
|
||
<li><code>E:first-of-type</code> 匹配同类型中的第一个同级兄弟元素 E。</li>
|
||
<li><code>E:last-of-type</code> 匹配同类型中的最后一个同级兄弟元素 E。</li>
|
||
<li><code>E:nth-of-type(n)</code> 匹配同类型中的第 n 个同级兄弟元素 E。</li>
|
||
<li><code>E:nth-last-of-type(n)</code> 匹配同类型中的倒数第 n 个同级兄弟元素 E。
|
||
既然上面这几个选择器带有<code>type</code>，我们可以这样理解：先在同级里找到所有的 E 类型，然后根据 n 进行匹配。
|
||
<strong>3、格式：（第三部分）</strong></li>
|
||
<li><code>E:empty</code> 匹配没有任何子节点（包括空格等 text 节点）的元素 E。</li>
|
||
<li><code>E:target</code> 匹配相关 URL 指向的 E 元素。要配合锚点使用。
|
||
<strong>举例：</strong>
|
||
我们可以把多个伪类选择器结合起来使用，比如：
|
||
<img src="../../img_list/20180207_1340.png" alt="" />
|
||
如果想把上图中，第一行的前三个 span 标红，我们可以这样使用结构伪类选择器：</li>
|
||
</ul>
|
||
<pre><code class="language-css">dt:first-child span:nth-of-type(-n + 3) {
|
||
color: red;
|
||
}
|
||
</code></pre>
|
||
<p>最后来张表格：
|
||
<img src="../../img_list/20180207_1502.png" alt="" /></p>
|
||
<h3 id="伪元素选择器"><a class="header" href="#伪元素选择器">伪元素选择器</a></h3>
|
||
<p>伪元素选择器的标志性符号是 <code>::</code>。
|
||
<strong>1、格式：（第一部分）</strong></p>
|
||
<ul>
|
||
<li><code>E::before</code> 设置在 元素 E 前面（依据对象树的逻辑结构）的内容，配合 content 属性一起使用。</li>
|
||
<li><code>E::after</code> 设置在 元素 E 后面（依据对象树的逻辑结构）的内容，配合 content 属性一起使用。
|
||
<code>E:after</code>、<code>E:before</code>在旧版本里是伪类，在 CSS3
|
||
这个新版本里是伪元素。新版本里，<code>E:after</code>、<code>E:before</code>会被自动识别为<code>E::after</code>、<code>E::before</code>，按伪元素来对待，这样做的目的是用来做兼容处理。
|
||
举例：</li>
|
||
</ul>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
/*::before 和::after 是通过 css 模拟出的html标签的效果*/
|
||
span::before {
|
||
content: "smyhvae";
|
||
color: red;
|
||
background-color: pink;
|
||
width: 50px;
|
||
height: 50px;
|
||
display: inline-block;
|
||
}
|
||
span::after {
|
||
content: "永不止步";
|
||
color: yellowgreen;
|
||
}
|
||
/*给原本的span标签设置一个默认的属性*/
|
||
span {
|
||
border: 1px solid #000;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<span>生命壹号</span>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_1409.png" alt="" />
|
||
<strong>上图可以看出</strong>：</p>
|
||
<ul>
|
||
<li>通过伪元素选择器，就可以添加出类似于 span 标签的效果（记得要结合 content 属性使用）。</li>
|
||
<li>通过这两个属性添加的伪元素，是<strong>行内元素</strong>，需要转换成块元素才能设置宽高。
|
||
<strong>2、格式：（第二部分）</strong></li>
|
||
<li><code>E::first-letter</code> 设置元素 E 里面的<strong>第一个字符</strong>的样式。</li>
|
||
<li><code>E::first-line</code> 设置元素 E 里面的<strong>第一行</strong>的样式。</li>
|
||
<li><code>E::selection</code> 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
|
||
<code>E::first-letter</code> 的举例：
|
||
<img src="../../img_list/20180207_1430.png" alt="" />
|
||
<code>E::first-line</code>的举例：
|
||
<img src="../../img_list/20180207_1433.png" alt="" />
|
||
最后来张表格：
|
||
<img src="../../img_list/20180207_1503.png" alt="" /></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>以下是正文。</p>
|
||
</blockquote>
|
||
<h2 id="前言-4"><a class="header" href="#前言-4">前言</a></h2>
|
||
<p>我们在上一篇文章中学习了<a href="http://www.cnblogs.com/smyhvae/p/8426799.html">CSS3 的选择器</a>，本文来学一下
|
||
CSS3 的一些属性。
|
||
本文主要内容：</p>
|
||
<ul>
|
||
<li>文本</li>
|
||
<li>盒模型中的 box-sizing 属性</li>
|
||
<li>处理兼容性问题：私有前缀</li>
|
||
<li>边框</li>
|
||
<li>背景属性</li>
|
||
<li>渐变</li>
|
||
</ul>
|
||
<h2 id="文本"><a class="header" href="#文本">文本</a></h2>
|
||
<h3 id="text-shadow设置文本的阴影"><a class="header" href="#text-shadow设置文本的阴影">text-shadow：设置文本的阴影</a></h3>
|
||
<p>格式举例：</p>
|
||
<pre><code class="language-javascript">text-shadow: 20px 27px 22px pink;
|
||
</code></pre>
|
||
<p>参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
|
||
效果举例：
|
||
<img src="../../img_list/20180207_1600.png" alt="" /></p>
|
||
<h3 id="举例凹凸文字效果"><a class="header" href="#举例凹凸文字效果">举例：凹凸文字效果</a></h3>
|
||
<p>text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
|
||
代码如下：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
body {
|
||
background-color: #666;
|
||
}
|
||
div {
|
||
font-size: 100px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-family: "Microsoft Yahei";
|
||
color: #666;
|
||
}
|
||
/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
|
||
.tu {
|
||
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
|
||
}
|
||
.ao {
|
||
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="ao">生命壹号</div>
|
||
<div class="tu">生命壹号</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_1617.png" alt="" />
|
||
上图中，实现凹凸文字效果的方式比较简单，给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。</p>
|
||
<h2 id="盒模型中的-box-sizing-属性"><a class="header" href="#盒模型中的-box-sizing-属性">盒模型中的 box-sizing 属性</a></h2>
|
||
<p>我们在**<a href="http://www.cnblogs.com/smyhvae/p/7256371.html">之前的文章</a><strong>中专门讲过盒子模型。
|
||
CSS3 对盒模型做出了新的定义，即允许开发人员</strong>指定盒子宽度和高度的计算方式**。
|
||
这就需要用到 <code>box-sizing</code>属性。它的属性值可以是：<code>content-box</code>、<code>border-box</code>。解释如下。
|
||
<strong>外加模式：</strong>（css 的默认方式）</p>
|
||
<pre><code class="language-javascript">box-sizing: content-box;
|
||
</code></pre>
|
||
<p>解释：此时设置的 width 和 height
|
||
是<strong>内容区域</strong>的宽高。<code>盒子的实际宽度 = 设置的 width + padding + border</code>。此时改变 padding 和 border
|
||
的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
|
||
<strong>内减模式：</strong>【需要注意】</p>
|
||
<pre><code class="language-javascript">box-sizing: border-box;
|
||
</code></pre>
|
||
<p>解释：此时设置的 width 和 height 是<strong>盒子</strong>的总宽高。<code>盒子的实际宽度 = 设置的 width</code>。此时改变 padding 和 border
|
||
的大小，会改变内容的宽高，盒子的总宽高不变。</p>
|
||
<h2 id="处理兼容性问题私有前缀"><a class="header" href="#处理兼容性问题私有前缀">处理兼容性问题：私有前缀</a></h2>
|
||
<p>通过网址<a href="http://caniuse.com/">http://caniuse.com/</a> 可以查询 CSS3 各特性的支持程度。
|
||
处理兼容性问题的常见方法：为属性添加<strong>私有前缀</strong>。
|
||
如此方法不能解决，应尽量避免使用，无需刻意去处理 CSS3 的兼容性问题。
|
||
<strong>私有前缀的举例</strong>：
|
||
比如说，我想给指定的 div 设置下面这样一个属性：</p>
|
||
<pre><code class="language-css">background: linear-gradient(left, green, yellow);
|
||
</code></pre>
|
||
<p>上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
|
||
如果直接这样写属性，是看不到效果的：
|
||
<img src="../../img_list/20180207_1700.png" alt="" />
|
||
此时，我们可以<strong>为浏览器添加不同的私有前缀</strong>，属性就可以生效了。
|
||
格式如下：</p>
|
||
<pre><code class="language-html">-webkit-: 谷歌 苹果 -moz-:火狐 -ms-：IE -o-：欧朋
|
||
</code></pre>
|
||
<p>格式举例如下：</p>
|
||
<pre><code class="language-css">background: -webkit-linear-gradient(left, green, yellow);
|
||
background: -moz-linear-gradient(left, green, yellow);
|
||
background: -ms-linear-gradient(left, green, yellow);
|
||
background: -o-linear-gradient(left, green, yellow);
|
||
background: linear-gradient(left, green, yellow);
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_1710.png" alt="" /></p>
|
||
<h2 id="边框"><a class="header" href="#边框">边框</a></h2>
|
||
<p>边框的属性很多，其中<strong>边框圆角</strong>和<strong>边框阴影</strong>这两个属性，应用十分广泛，兼容性也相对较好，且符合<strong>渐进增强</strong>的原则，需要重点熟悉。</p>
|
||
<h3 id="边框圆角border-radius-属性"><a class="header" href="#边框圆角border-radius-属性">边框圆角：<code>border-radius</code> 属性</a></h3>
|
||
<p>边框的每个圆角，本质上是一个圆，圆有<strong>水平半径</strong>和<strong>垂直半径</strong>：如果二者相等，就是圆；如果二者不等， 就是椭圆。
|
||
单个属性的写法：</p>
|
||
<pre><code class="language-css">border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
|
||
border-top-right-radius: 60px 120px;
|
||
border-bottom-left-radius: 60px 120px;
|
||
border-bottom-right-radius: 60px 120px;
|
||
</code></pre>
|
||
<p>复合写法：</p>
|
||
<pre><code>border-radius: 60px/120px; //参数：水平半径/垂直半径
|
||
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
|
||
border-radius: 20px 60px;
|
||
</code></pre>
|
||
<p>最简洁的写法：（四个角的半径都相同时）</p>
|
||
<pre><code>border-radius: 60px;
|
||
</code></pre>
|
||
<p>举例：</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html>
|
||
<head lang="en">
|
||
<meta charset="UTF-8" />
|
||
<title></title>
|
||
<style>
|
||
.parent {
|
||
width: 400px;
|
||
}
|
||
.box {
|
||
width: 100px;
|
||
height: 100px;
|
||
float: left;
|
||
border: 1px solid rgb(144, 12, 63);
|
||
margin: 20px;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
color: #fff;
|
||
font-size: 50px;
|
||
background-color: rgb(255, 141, 26);
|
||
}
|
||
/*画圆形的方式一*/
|
||
.box:nth-child(1) {
|
||
border-radius: 50px;
|
||
}
|
||
/*画圆形的方式二*/
|
||
.box:nth-child(2) {
|
||
border-radius: 50%;
|
||
}
|
||
.box:nth-child(3) {
|
||
border-radius: 100px 0 0 0;
|
||
}
|
||
.box:nth-child(4) {
|
||
border-radius: 100px/50px;
|
||
}
|
||
.box:nth-child(5) {
|
||
border-radius: 10%;
|
||
}
|
||
.box:nth-child(6) {
|
||
border-radius: 0 100px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="parent">
|
||
<div class="box">1</div>
|
||
<div class="box">2</div>
|
||
<div class="box">3</div>
|
||
<div class="box">4</div>
|
||
<div class="box">5</div>
|
||
<div class="box">6</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
<p>效果如下：
|
||
<img src="../../img_list/20180207_1750.png" alt="" /></p>
|
||
<h3 id="边框阴影box-shadow-属性"><a class="header" href="#边框阴影box-shadow-属性">边框阴影：<code>box-shadow</code> 属性</a></h3>
|
||
<p>格式举例：</p>
|
||
<pre><code class="language-javascript">box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
|
||
box-shadow: 15px 21px 48px -2px #666;
|
||
</code></pre>
|
||
<p>参数解释：</p>
|
||
<ul>
|
||
<li>水平偏移：正值向右 负值向左。</li>
|
||
<li>垂直偏移：正值向下 负值向上。</li>
|
||
<li>模糊程度：不能为负值。
|
||
效果如下：
|
||
<img src="../../img_list/20180207_2027.png" alt="" />
|
||
另外，后面还可以再加一个 inset 属性，表示内阴影。如果不写，则默认表示外阴影。例如：</li>
|
||
</ul>
|
||
<pre><code class="language-javascript">box-shadow:3px 3px 3px 3px #666 inset;
|
||
</code></pre>
|
||
<p>效果如下：
|
||
20180207_2028.png <img src="../../img_list/20180206_2150.png" alt="" />
|
||
<strong>注意</strong>：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
|
||
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。</p>
|
||
<h3 id="边框图片"><a class="header" href="#边框图片">边框图片</a></h3>
|
||
<p>边框图片有以下属性：</p>
|
||
<pre><code class="language-javascript">/* 边框图片的路径*/
|
||
border-image-source: url("images/border.png");
|
||
/* 图片边框的裁剪*/
|
||
border-image-slice: 27;
|
||
/*图片边框的宽度*/
|
||
border-image-width: 27px;
|
||
/*边框图片的平铺*/
|
||
/* repeat :正常平铺 但是可能会显示不完整*/
|
||
/*round: 平铺 但是保证 图片完整*/
|
||
/*stretch: 拉伸显示*/
|
||
border-image-repeat: stretch;
|
||
</code></pre>
|
||
<p>我们也可以写成一个综合属性：</p>
|
||
<pre><code class="language-javascript">border-image: url("images/border.png") 27/20px round;
|
||
</code></pre>
|
||
<p>这个属性要好好理解，我们假设拿下面这张图来作为边框图片：
|
||
<img src="../../img_list/20180207_2045.png" alt="" />
|
||
<img src="../../img_list/20180207_2046.png" alt="" />
|
||
这张图片将会被“切割”成<strong>九宫格</strong>形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
|
||
<img src="../../img_list/20180207_2050.png" alt="" />
|
||
再具体一点：
|
||
<img src="../../img_list/20180207_2051.png" alt="" /></p>
|
||
<h3 id="常见的边框图片汇总"><a class="header" href="#常见的边框图片汇总">常见的边框图片汇总</a></h3>
|
||
<pre><code class="language-html"></code></pre>
|
||
<p>CSS3 的更多属性，且看下文继续。
|
||
我们在 div 里放一个 img，发现：
|
||
在 html 和 html5 中，div 的长宽是不同的，后者的高度要超过几个像素。
|
||
比如说，下面这个是 html 的。</p>
|
||
<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Document</title>
|
||
<style type="text/css">
|
||
* {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
<img src="/Users/smyhvae/Dropbox/img/20170813_1143.jpg" alt="" />
|
||
</div>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
|
||
</main>
|
||
|
||
<nav class="nav-wrapper" aria-label="Page navigation">
|
||
<!-- Mobile navigation buttons -->
|
||
<a rel="prev" href="../../posts/angular/same_route_reload.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||
<i class="fa fa-angle-left"></i>
|
||
</a>
|
||
|
||
<a rel="next prefetch" href="../../posts/css/use_css_media.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
|
||
<div style="clear: both"></div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
||
<a rel="prev" href="../../posts/angular/same_route_reload.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||
<i class="fa fa-angle-left"></i>
|
||
</a>
|
||
|
||
<a rel="next prefetch" href="../../posts/css/use_css_media.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script>
|
||
window.playground_line_numbers = true;
|
||
</script>
|
||
|
||
<script>
|
||
window.playground_copyable = true;
|
||
</script>
|
||
|
||
<script src="../../ace.js"></script>
|
||
<script src="../../editor.js"></script>
|
||
<script src="../../mode-rust.js"></script>
|
||
<script src="../../theme-dawn.js"></script>
|
||
<script src="../../theme-tomorrow_night.js"></script>
|
||
|
||
<script src="../../elasticlunr.min.js"></script>
|
||
<script src="../../mark.min.js"></script>
|
||
<script src="../../searcher.js"></script>
|
||
|
||
<script src="../../clipboard.min.js"></script>
|
||
<script src="../../highlight.js"></script>
|
||
<script src="../../book.js"></script>
|
||
|
||
<!-- Custom JS scripts -->
|
||
<script src="../../src/js/custom.js"></script>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|